Extending the Rule Of Thirds for Web Page Layouts - Rule of Thirds variation: inverting column positions
(Page 3 of 4 )
Since I just quickly reviewed how to use the Rule Of Thirds to build a two-column web page layout whose side bar was placed to the left of the web document, it’s time to see how this same approach can be used for inverting the position of this bar to produce a design where it will be shifted to the right side instead.
Given that, here is the group of CSS styles that will generate this whole new layout. Take a look at them:
body{
padding: 0;
margin: 0;
background: #eee;
}
#container{
width: 900px;
margin: 0 auto;
background: #ccc;
}
#header{
height: 100px;
padding: 10px;
background: #fc0;
}
#sidebar{
float: right;
width: 280px;
height: 400px;
padding: 10px;
}
#content{
margin-right: 300px;
height: 400px;
padding: 10px;
background: #fff;
}
#footer{
clear: both;
height: 100px;
padding: 10px;
background: #ffc;
}
h1,h2,p{
margin: 0;
}
As you can see, the above CSS code is quite simple to follow. All it does is float the side bar to the right side of the web page, while the content area has been shifted to the left. Here, it’s clear to see how easy it is to generate a handy variation of the classic two-column design, while still maintaining the proportion dictated by the Rule Of Thirds.
Having already coded the CSS styles required for constructing this specific web page layout, I’m going to link the styles to the structural markup of the web document, in this way finishing the development of this practical example.
So, to see how this process will be accomplished, jump ahead and read the following section. It’s only one click away.
Next: Completing the sample web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
