Left Division


There are few simple rules that you can follow to make structuring pages with the division tag a little simpler.

These rules apply when you are trying to place 2 or more divisions horizontally adjacent to each other on the same page.

Use the HTML5 doctype:
<!DOCTYPE html>

Nest the adjacent divisions within a container division.

Float the container so that it expands with the height of the tallest nested column.

<div class="container">
<div class="left"></div>
<div class="right"></div>

*Note: This demo is not 100% liquid because it uses a table and the pre tag to present CSS code.

Right Division



div.container {
float: left;
width: 100%;
border-radius: 20px;
box-shadow: 5px 5px 10px #0e0e0e
div.left {
float : left; 
width: 42%;
padding:4% 4%; 
div.right {
float : left; 
width: 42%;
padding:4% 4%;
body { 
/*Set width */
max-width: 1000px;
/* center body */
margin: 1% auto

*Padding:(top-bottom left-right)
42% + 4% + 4% = 50%

Back to Division Tag