Swapping Column Positions in Web Page Layouts with Negative Margins - Review: using negative margins to build a two-column liquid design
(Page 2 of 4 )
In case you didn’t have the chance to read the preceding article of the series, don’t miss this valuable opportunity to learn how to use CSS negative margins to build a simple two-column web page layout.
Basically, all the source code required to create the aforementioned layout is included in the following (X)HTML file, so have a look at it, please:
<!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: 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>
As you can see, the above web document is made up of two columns. The first one, that is the side bar, has been floated to the right, and the main one has been placed on the left. Of course, the most important detail to stress here is that this primary column is also wrapped by another DIV, whose right margin has a value of –300 px. The specification of this negative margin permits us to make room for the corresponding side bar, in this way demonstrating in a nutshell how the negative-margin technique functions.
Assuming that you already grasped the process for building a simple two-column web page layout by using CSS negative margins, it’s time to move forward and continue exploring the possibilities offered by this useful approach.
Thus, in the upcoming section I’m going to teach you how to utilize negative margins to build the same web page layout that you learned before, but this time swapping the position of its respective columns. Sounds good enough to you? Great! Click on the link shown below and keep reading.
Next: Swapping the position of web page columns >>
More Style Sheets Articles
More By Alejandro Gervasio
