CSS – Three Column Layout with Header -Absolute Positioning
Filed Under (CSS, Web Design) by Dave on 05-04-2008
Tagged Under : 3 column layout, Absolute Positioning, CSS
A popular layout among web designers is the 3 column layout. It allows a lot of flexibility for content layout. It is often used to add additional links for categories on the left and lining up sponsors down the right hand column. In this web site design tutorial we’ll use absolute positioning to set up a basic 3 column website with a header for the logo. This example will use the above format and place links in the left column, body of content in the middle and sponsors or additional content for the right sidebar column.
Heres a screenshot of what we’ll be building: Final
If you don’t have an HTML editor you can create a text file using wordpad and add these lines of code:
<html>
<head>
<title>3 column layout</title>
</head>
<body>
</body>
Save and name it as 3column.html. To reduce clutter between the head tags, we’ll attach a external CSS stylesheet. Create an additional text file and save and name it 3column.css. Make sure to put both files in the same directory when you upload them to your server. To attach an external CSS stylesheet place this line of code under the title between the head tags: <link href=”3column.css” rel=”stylesheet” type=”text/css” /> . The entire code so far looks like this:
<html>
<head>
<title>3 column layout</title>
<link href=”3column.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
</body>
</html>
Let’s start setting up our web page. Between the body tags create the header area and the columns for the content by adding these lines of code: (note: I added some dummy text to the content area that I got from http://www.lipsum.com)
<div id=”header”><h1>3 Column Layout with Header</h1></div>
<div id=”links”><ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>
<div id=”content”><h5>Title for some content</h5>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis ipsum, porttitor eu, placerat id, auctor at, ipsum. Maecenas dignissim elit ac risus. Fusce ac enim vel magna ullamcorper malesuada. Cras in neque. Aenean malesuada lorem vitae tortor. Vivamus ac eros sit amet magna tempor fermentum. Sed venenatis, metus a pretium vehicula, sapien ante tempor nisl, eget facilisis tortor libero eget nunc. Aenean tellus arcu, porttitor a, faucibus a, sollicitudin sed, odio. Maecenas in tortor in diam laoreet faucibus. Pellentesque at diam. Praesent sed magna. Nulla ut diam. Maecenas varius. In hac habitasse platea dictumst. Nam a est eu orci tincidunt ultricies. Donec accumsan lectus a purus. Integer vitae tortor. Morbi quis orci sodales orci vulputate facilisis. </p>
</div>
<div id=”sponsors”>
<ul>
<li><a href=”#”>Sponsor 1</a></li>
<li><a href=”#”>Sponsor 2</a></li>
<li><a href=”#”>Sponsor 3</a></li>
<li><a href=”#”>Sponsor 4</a></li>
<li><a href=”#”>Sponsor 5</a></li>
</ul>
</div>
Since we haven’t added anything to the stylesheet yet, your layout should look something like this:
(click for larger view)
Before we start styling the columns, add this line of code to the 3column.css stylesheet:
body {
margin-top: 0px;
}
This will move everything up to the top edge by overriding the default margin. Next, let’s start styling the header by adding these lines to the 3column.css stylesheet :
#header {
background-color: green;
height: 100px;
text-align: center;
padding-top: 20px;
}
#header h1 {
margin-right: auto;
margin-left: auto;
text-align: center;
font-size: 2em;
color: #FFFFFF;
}
Notice we set the margin-top value to 0px under #header h1. This is because some browsers such as firefox will push the header away from the top edge so we must add a 0px to override the default margin. We also added a top padding of 20px to the header div so we could push the title down to to the middle of the header.
Next we align the two side columns. Add these lines to your 3column.css:
#links {
width: 150px;
position: absolute;
left: 0px;
top: 28px;
margin-top: 135px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #0066CC;
margin-left: 15px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0066CC;
}
#sponsors {
width: 150px;
position: absolute;
top: 28px;
right: 0px;
margin-top: 135px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #0066CC;
margin-right: 15px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0066CC;
}
We set the value of the #links to left: 0px and the #sponsors column to right: 0px. When using absolute positioning you must set these values like this so they will always ride up against their edges. Then we can use the left and right margins to push them away from the edge just a little. In this case 15px. Top margins where set to 135px to push them out of the header area and into the body where we want them.
Next, we add the margins to the the content div to center it in the middle and style the <h5> heading to our liking:
#content {
margin-left: 175px;
margin-right: 175px;
}
#content h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
text-decoration: underline;
}
There are many different ways to style this web page by adding picture(s), colors, custom graphics and by adding your logo to the header. Just experiment and have fun!
