Creating Hybrid Web Page Layouts with Negative Margins
In this conclusion to a four-part series on using negative margins for web page layouts, we will take a look at web pages with a hybrid design. By this I mean web pages that use both liquid and fixed widths for their columns. This is a common design that is easy to handle with CSS negative margins; keep reading to learn how to do it.
Creating Hybrid Web Page Layouts with Negative Margins - Completing a hybrid web page layout (Page 4 of 4 )
As I stated in the section that you just read, below I listed the complete source code required to build a hybrid web page layout using CSS negative margins. In addition, I styled the header and footer section of the web page in question, but naturally you can modify this and use your own CSS styles.
Having clarified that point, please pay close attention to the following (X)HTML file, which is responsible for constructing the hybrid design that I mentioned earlier:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Example on three-column web page layout using negative margins with fixed width</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee;
}
h1{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
}
/* 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;
}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="header">
<h1>Header Section</h1>
<p>This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section.</p></div>
<div id="navbar">
<h1>Nav Bar</h1>
<p>This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column.</p></div>
<div id="colwrapper">
<div id="maincol">
<h1>Main Column 1</h1>
<p>This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column. This is the content of the main column.</p>
</div>
</div>
<div id="sidecol">
<h1>Right Column</h1>
<p>This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column. This is the content of the side column.</p></div>
<div id="footer">
<h1>Footer Section</h1>
<p>This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section.</p></div>
</div>
</body>
</html>
That’s it. Now you have at your disposal all of the source code required to build a hybrid design that uses negative margins to accommodate the respective containing DIVs. Also, if you want to see how the previous web document looks, here’s an screen capture that shows pretty clearly its visual appearance:
Final thoughts
Unfortunately, we’ve come to the end of the series. But overall the experience has been educational, since you learned how to take advantage of CSS negative margins to build different types of web page layouts. Certainly, negative margins aren’t the only approach that you can use to create DIV-based web page designs, but admittedly it is one of the most consistent and easiest to learn.
See you in the next web development tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
Creating Three-Column Web Page Layous with Negative Margins
