Creating Web Page Layouts with Negative Margins - Using negative margins to position the main DIVs of a web document
(Page 3 of 4 )
Since in the previous section I went through building a basic web page, which was composed of two primary columns, it is now time to define the pertinent CSS styles that will accommodate these columns as expected within the mentioned web document.
Here are the CSS styles that build a two-column web page layout by using negative margins:
#header{
background: #ffc;
}
#sidecol{
float: right;
width: 300px;
background: #eee;
}
#maincol{
float: left;
width: 100%;
margin-right: -300px;
}
#footer{
clear: both;
background: #ffc;
}
Aside from noticing the assignment of some background colors to the respective header and footer sections of the sample web document created previously, you should pay careful attention to the definition of the #sidecol and #maincol selectors. Obviously, the first one styles the side bar of the document, since in this particular case it's been floated to the right. But, undoubtedly, the most interesting things happen when styling the second one.
As you can see, not only this column has been floated to the left, but it also specifies a negative value for its "margin-right" CSS property of -300px. This has been done deliberately, to pull out this column from the side bar defined previously. With this brief explanation, are you starting to grasp how to use negative margins to build consistent web page layouts? I bet you are!
However, the implementation of this technique is rather incomplete at this point. Why do I say this? If I merge the previous CSS styles with the markup of the sample web page built in the beginning, I'll get the following source file:
<Y!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on two-column web page layout using negative margins</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
}
#header{
background: #ffc;
}
#sidecol{
float: right;
width: 300px;
background: #eee;
}
#maincol{
float: left;
width: 100%;
margin-right: -300px;
}
#footer{
clear: both;
background: #ffc;
}
</style>
</head>
<body>
<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="maincol">
<h1>Main Column</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 id="sidecol">
<h1>Side 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>
</body>
</html>
So far, so good, right? Well, no so fast. If you test the above (X)HTML file on your own browser, you'll see that it displays a two-column web page layout, but the main column stills overlaps with the side bar. This undesirable result can be clearly seen in the following screen shot:
Obviously, I'm halfway to achieving a correct web page layout using a negative margin, since the main column needs to be tweaked a bit to avoid the overlapping effect that you saw in the prior image. Therefore, in the final section of this tutorial I'm going to show you how to fix this small issue, in this way demonstrating the real functionality of using CSS negative margins.
To learn how the previous web page layout will be corrected, please jump ahead and read the next few lines.
Next: Defining an additional wrapping DIV >>
More Style Sheets Articles
More By Alejandro Gervasio
