Creating Web Page Layouts with Negative Margins - Building a quick and dirty two-column web page layout
(Page 2 of 4 )
A good point to start demonstrating how negative margins can be used to create consistent web page layouts consists of building a rudimentary web document, which will be comprised of two primary columns, where the first one will be placed on the left and the second one, obviously, will be positioned on the right of the document in question.
The structural markup of the mentioned web document will look 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</title>
</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>
As you can see, the structure of the previous web page is actually very simple to grasp. In simple terms, it's made up of the typical header and footer sections, while the middle section contains two primary columns. So far, nothing weird, right?
Now, having defined the markup, and some trivial contents corresponding to the above web document, it's time to apply some CSS styles to it and see how the main DIVs can be properly positioned to the left and right sides of the document in question.
Indeed, things are getting interesting now! So, in the following section I'll be defining the aforementioned CSS styles that will be tasked with constructing a basic two-column web page layout by specifying a few negative margins.
To see how this will be done, please click on the link below and keep reading.
Next: Using negative margins to position the main DIVs of a web document >>
More Style Sheets Articles
More By Alejandro Gervasio
