A Two-Column Web Page Layout Based on the Rule of Thirds

Once a web document has been divided in thirds, it’s quite easy to create a few handy variations of this initial layout by removing the middle third, which turns the original web page in a two-column design. Now let me show you how to implement this approach via CSS, so you can grasp its logic more easily.

The following CSS styles construct a basic web page layout composed of a side bar and a content section, by aligning the pertinent columns according to the Rule Of Thirds. Have a look at them, please:

body{

padding: 0;

margin: 0;

background: #eee;

}

#container{

width: 900px;

margin: 0 auto;

background: #ccc;

}

#header{

height: 100px;

padding: 10px;

background: #fc0;

}

#sidebar{

float: left;

width: 280px;

height: 400px;

padding: 10px;

}

#content{

margin-left: 300px;

height: 400px;

padding: 10px;

background: #fff;

}

#footer{

clear: both;

height: 100px;

padding: 10px;

background: #ffc;

}

h1,h2,p{

margin: 0;

} 

As I expressed before, the above CSS code is responsible for building a web page design that’s made up of two columns. In this case, the main container has a width of 900px, and then the side bar is 300px wide, while the remaining content area has a value of 600px. From this simple calculation, it’s clear to see how easy it is to create a basic variation of the classic three-column schema while still applying the Rule of Thirds.

Having already coded the CSS styles required for building this web page layout comprised of a couple of columns, we now need to link the styles to the structural markup of the page in question.

This task will be performed in the last section of this tutorial. To get there, click on the link that appears below and read the next segment.