Creating Hybrid Web Page Layouts with Negative Margins

In consonance with the concepts deployed in the prior section, it’s possible to use negative margins to construct a hybrid web page layout. This layout will be comprised of three main columns, which will be centered in the pertinent web document via a general wrapper that has a fixed width.

The creation process is pretty straightforward, but to dissipate any doubts about it, take a look at the following CSS styles. They are responsible for constructing the aforementioned hybrid web page layout.

Here they are:

/* style header section */

#header{

background: #ffc;

}

/* style navigation bar */

#navbar{

float: left;

width: 200px;

background: #ccc;

}

/* wraps up the whole page */

#mainwrapper{

width: 800px;

margin-left: auto;

margin-right: auto;

}

/* wraps up the main column */

#colwrapper{

float: left;

width: 100%;

margin-left: -200px;

margin-right: -200px;

}

/* style main column */

#maincol{

margin-right: 200px;

margin-left: 200px;

background: #fff;

}

/* style side column */

#sidecol{

float: right;

width: 200px;

background: #ccc;

}

/* style footer section */

#footer{

clear: both;

background: #ffc;

}

As you can see, in this case I defined a general wrapper, identified as “mainwrapper,” which wraps all of the primary columns of the web document and also has a fixed width of 800px. Then, the respective side bars are pulled away from the center by floating them to the left and the right respectively, and finally the main column is positioned in the document by means of an additional wrapper that uses two negative margins to center the column in question.

At this point, you hopefully learned how to build a hybrid web page layout using only a pair of CSS negative margins. However, the missing piece of this scheme is the structural markup that must be tied to the previous CSS styles. Therefore, in the final section of this article I’ll be listing the definition of a brand new (X)HTML file, which will include all of the source code required to implement this hybrid web page design.

To see how the (X)HTML file will be created, please click on the link below and keep reading. We’re almost finished!