Creating Three-Column Web Page Layous with Negative Margins - Listing the full source code of the three-column web page design
(Page 4 of 4 )
As I stated in the section that you just read, below I listed the complete source code required for building a basic three-column web page layout, including the group of CSS styles that were explained before, along with the corresponding (X)HTML markup:
<!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>
Here you have it. Now, by using the previous code sample, you'll be able to use CSS negative margins to start building solid web page layouts that will be rendered consistently by most modern browsers.
In addition to studying in detail the practical example developed a few lines above, you may want to take a look at the following image, which shows the web document layout built previously. Here it is:
And finally, feel free to use all of the code samples included in this tutorial to acquire a solid background in constructing consistent web page layouts using CSS negative margins. It's going to be an instructive experience!
Final thoughts
In this third installment of the series, things definitely got much more interesting, since you learned how to use a couple of CSS negative margins to construct a basic three-column web page layout, which will be displayed consistently across most modern browsers.
In the last part of this series, I'll be teaching you how to use this helpful CSS approach to construct a web page layout whose primary columns will be centered in the document using a fixed design.
Now that you've been warned about the topics that will be discussed in the upcoming tutorial, you won't want 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. |
