Creating Web Page Layouts with Negative Margins - Defining an additional wrapping DIV
(Page 4 of 4 )
As you saw in the earlier section, the web page layout that I just built by using a CSS negative margin needs to be improved, since the side and main columns of the web document overlap with each other. Nonetheless, this small issue can be easily fixed simply by including an additional DIV that wraps up the main column, and specifying the negative margin for this element instead.
To dissipate any possible doubts that you might have regarding the application of this simple solution, below I redefined the corresponding CSS styles, this time adding the new wrapping DIV:
/* style header section */
#header{
background: #ffc;
}
/* style side column */
#sidecol{
float: right;
width: 300px;
background: #eee;
}
/* wraps up the main column */
#wrapper{
width: 100%;
float: left;
margin-right: -300px;
}
/* style main column */
#maincol{
margin-right: 300px;
}
/* style footer section */
#footer{
clear: both;
background: #ffc;
}
As you can see, the negative margin has been assigned to the brand new wrapper, instead of doing this with the main column. This avoids causing the main column and the side bar to overlap with each other. Not too difficult to grasp, right?
The above CSS styles would be rather incomplete if I didn't show you how they can be linked with the corresponding markup of the sample web page created right at the beginning, so here it is:
<!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 (no overlap occurs with columns)</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;
}
/* style header section */
#header{
background: #ffc;
}
/* style side column */
#sidecol{
float: right;
width: 300px;
background: #eee;
}
/* wraps up the main column */
#wrapper{
width: 100%;
float: left;
margin-right: -300px;
}
/* style main column */
#maincol{
margin-right: 300px;
}
/* style footer section */
#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="wrapper">
<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>
<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>
Here you have it. By specifying a negative margin for the wrapper of the main column, you can create a basic two-column web page layout that will be displayed consistently by most modern browsers.
Here's a complementary image that clearly shows the visual appearance of this sample web document, so take a look at it, please:
Finally, as usual with many of my articles on web development, feel free to use and test all of the codes samples included in this tutorial. It will help you gain a better grasp of using negative margins to create consistent web page layouts.
Final thoughts
In this first article of the series, hopefully you grasped the logic that stands behind building a basic two-column web page layout by mean of CSS negative margins. At first this approach is a bit tricky, but I believe that you won't have mayor hassles mastering its key concepts.
In the next part, I'm going to teach you how to use CSS negative margins to swap out the columns of web document layouts. Now that you've been warned, you don't have any excuses to miss it!
| 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. |
