Creating Three-Column Web Page Layous with Negative Margins - Building three-column web page layouts
(Page 3 of 4 )
If you found creating two-column web page layouts using negative margins a no-brainer process, then it's highly probable that you'll grasp in a snap how to implement the same approach to construct web documents comprised of three primary columns.
How can this be done utilizing negative margins? Well, the answer to that specific question is actually much simpler than what you might think initially. Essentially, it's based on defining two lateral bars, which will be floated respectively to the left and the right sides of a web page, while the main column will be centered by specifying negative values for their "margin-left" and "margin-right" CSS properties.
In addition, it's fair to mention that this main column will be wrapped by an additional container, as you saw in previous examples, meaning that the negative margins will be applied directly to this container instead. Of course, the way that this approach works will be better understood by example, so take a look at the following CSS styles, which are responsible for building this three-column design through the use of negative margins.
Here they are:
/* style header section */
#header{
background: #ffc;
}
/* style navigation bar */
#navbar{
float: left;
width: 300px;
background: #ccc;
}
/* wraps up the main column */
#wrapper{
float: left;
width: 100%;
margin-left: -300px;
margin-right: -300px;
}
/* style main column */
#maincol{
margin-right: 300px;
margin-left: 300px;
}
/* style side column */
#sidecol{
float: right;
width: 300px;
background: #ccc;
}
/* style footer section */
#footer{
clear: both;
background: #ffc;
}
As I said before, apart from styling the respective side bars of the web document, the above CSS code assigns two negative values to the left and right margins of the wrapping DIV that contain the main column, in this way centering it within the web document in question.
The rest of the previous CSS styles are simply included with the purpose of styling the header and footer sections of the web page, so I assume that you won't have major problems understanding how they work.
Well, at this point you hopefully grasped the logic that stands behind using negative margins to build a rudimentary three-column web page layout. Nonetheless, I must admit that the CSS styles listed above look pretty disconnected if they're not accompanied by the corresponding structural markup, right?
Therefore, in the last section of this tutorial I'll be showing you a final example, where both the CSS styles and (X)HTML code are included in one single file to construct a consistent three-column web page layout.
To see how this brand new sample file will look, jump ahead and read the next few lines.
Next: Listing the full source code of the three-column web page design >>
More Style Sheets Articles
More By Alejandro Gervasio
