Creating Three-Column Web Page Layous with Negative Margins - A first step: a basic two-column web page layout
(Page 2 of 4 )
As you know, a hands-on approach is the best way to explain many topics of professional web development, and negative margins definitely aren't an exception. Therefore, before I teach you how to use them to build a few three-column web page layouts, first let me give you a practical example that shows how to build one that's only made up of two columns.
The example in question was developed in the previous tutorial of the series and it 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 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;
}
/* style header section */
#header{
background: #ffc;
}
/* style side column */
#sidecol{
float: left;
width: 300px;
background: #eee;
}
/* wraps up the main column */
#wrapper{
width: 100%;
float: right;
margin-left: -300px;
}
/* style main column */
#maincol{
margin-left: 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>
As you'll surely remember, the previous (X)HTML file is responsible for constructing a raw web page layout. This layout is comprised of the typical header and footer sections, as well as two primary columns, identified as "sidebar" and "maincol" respectively.
Of course, as you can see, the most relevant detail to stress here is that the main column has been positioned within the pertinent web document via an additional wrapper, which uses a negative value for its left margin, to pull it away from the side bar. This creates the basic web page layout that you saw earlier. Not too difficult to grasp, right?
Now that I dedicated a few moments to refreshing the key concepts surrounding the creation of two-column web page layouts by using CSS negative margins, I'm going to implement the same approach with the purpose of building a three-column web document design.
Looks pretty useful, right? Thus, to learn the details inherent to this interesting process, please click on the link that appears below and keep reading.
Next: Building three-column web page layouts >>
More Style Sheets Articles
More By Alejandro Gervasio
