Creating Hybrid Web Page Layouts with Negative Margins - Hybrid layout foundations:
(Page 2 of 4 )
An appropriate point to start teaching you how to build a hybrid web page layout using CSS negative margins consists first of recreating the practical example that I showed you in the previous article of the series, where I created a three-column elastic design.
Basically, the source code required to display the aforementioned web page layout looked like this:
<!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 building three-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;
}
/* 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;
}
</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="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="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>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>
</body>
</html>
Now that you have the chance to re-examine the previous sample (X)HTML file, it’s quite possible that you recall how to build a three-column web page layout using the functionality provided by CSS negative margins. As you can see, in this particular case the respective side bars have been floated to the left and right sides of the web document, via a simple “float” CSS property, while the center column has been positioned via two negative margins, which have be applied directly to its wrapper, identified simply as “wrapper.”
So far, nothing unexpected, right? At this stage everything looks good, since you’re armed with the right tools to build a three-column design like the one shown a few lines above. But, let me fire up my tiny spark of inspiration and show you how to use the concept that stands behind using negative margins, this time to combine the web page layout that you saw previously with a fixed design. Sounds quite interesting, doesn’t it?
Speaking more specifically, in the upcoming section I’m going to show you how to build a brand new web page layout, comprised also of three primary columns, which not only will have fixed widths, but will be displayed centered in the browser, making it a true hybrid design.
Do you want to see how this will be done? Go ahead and read the next few lines. I’ll be there, waiting for you.
Next: Creating a hybrid web page layout with CSS negative margins >>
More Style Sheets Articles
More By Alejandro Gervasio
