Last week I added the 2 Column Fixed CSS Layout example to the site.
The 3 column fixed CSS layout is very much the same except for a little extra markup and a few changes to the CSS to make the space for the extra column.
The HTML for this is as follows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>A Simple CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<ul id="navigation">
<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 id="maincontent">
<h2>Page title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et est id diam pulvinar bibendum. Suspendisse eget ipsum et nulla tristique malesuada. Nulla vel ligula. Duis ac ante vitae urna tempus gravida. Nam porttitor. Mauris condimentum rhoncus nisi. Cras a neque vel dui mollis dapibus. Integer venenatis tincidunt augue. Etiam aliquet. Etiam suscipit. Vivamus sit amet ligula. Nunc felis dui, euismod sollicitudin, vulputate a, nonummy vitae, ligula. Morbi vitae lacus sed arcu bibendum faucibus. Aenean feugiat placerat sapien. Vivamus quis libero. Aenean sed nunc. Nulla consequat, felis vel facilisis convallis, lacus lorem sagittis tellus, at nonummy augue dui sed ante. Nulla ut lorem. Nunc faucibus, neque at blandit auctor, magna mi pharetra dolor, ut sagittis est diam a dui.
</p>
<p>
Mauris viverra dolor. Suspendisse sed tortor eu augue varius commodo. Pellentesque venenatis cursus neque. Nunc quam diam, fermentum sed, dapibus sit amet, vestibulum et, justo. Suspendisse justo. Etiam venenatis risus a tortor. Donec dolor nunc, consectetuer id, luctus ut, vehicula non, risus. Curabitur fermentum lectus a massa. Donec risus enim, tempus sed, euismod vitae, pharetra eu, lacus. Aenean ornare iaculis velit. Donec bibendum neque eget ligula. Vivamus mi eros, porttitor vel, ornare ac, sagittis ac, odio. Morbi rutrum vehicula risus. Proin vulputate lobortis urna. Integer massa libero, vehicula sit amet, aliquet sit amet, imperdiet et, nisl. Nunc in tellus. Aenean pede nisi, feugiat sollicitudin, commodo vitae, malesuada non, pede.
</p>
<p>
Donec augue. Aliquam euismod velit et quam. Fusce facilisis ornare lectus. Ut leo sem, hendrerit ac, ullamcorper quis, pretium at, mauris. Mauris nulla. Donec ut nibh sit amet purus suscipit luctus. Nullam ipsum. In justo libero, sodales vitae, venenatis ac, elementum ac, ligula. Morbi ut massa vel massa tincidunt ornare. Aliquam pulvinar, felis at tempor tempus, quam dolor mattis lorem, a aliquet quam libero et elit.
</p>
</div>
<div id="subcontent">
<p>
Curabitur auctor diam vitae sapien. Vivamus varius libero. Nam at sem. Nunc non diam. Curabitur quis elit. Vivamus tempus. Proin vestibulum interdum arcu. Vestibulum dictum libero eu arcu. Donec ipsum. Curabitur tempus libero at mauris. Integer pharetra cursus tortor. In lobortis ipsum eu pede. Mauris fringilla mi. Donec risus mi, vestibulum eu, commodo vitae, venenatis sit amet, dui. Phasellus et velit.
</p>
<p>
Vestibulum sem massa, aliquet vel, ultricies sit amet, dapibus nec, purus. Nulla facilisi. Aenean neque mauris, feugiat quis, tristique et, posuere a, augue. Integer vel metus nec erat dapibus sodales. Sed lorem. Nam ante nisi, hendrerit a, luctus non, posuere dictum, purus.
</p>
</div>
<div id="footer">
Template created by <a href="https://dave-woods.co.uk">Dave Woods</a>
</div>
</div>
</div>
</body>
</html>
And the CSS to accompany this is as follows.
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
body {
width: 760px;
margin: 0px auto;
padding: 10px 0px;
background-color: #000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
}
p {
margin-bottom: 1.2em;
font-size: 110%;
}
h1 {
font-size: 230%;
}
h2 {
font-size: 170%;
}
#container {
float: left;
width: 750px;
padding: 5px;
background-color: #FFF;
}
#header {
float: left;
width: 730px;
padding: 10px;
background-color: #177F75;
}
#content {
float: left;
width: 750px;
padding: 5px 0px 0px 0px;
}
#navigation {
float: left;
width: 120px;
background-color: #B6212D;
padding: 5px 5px 4px 5px;
}
#navigation li {
list-style-type: none;
}
#navigation a, #navigation a:link {
background-color: #B67721;
color: #FFF;
display: block;
padding: 3px;
margin-bottom: 1px;
text-decoration: none;
font-weight: bold;
}
#navigation a:hover {
background-color: #21B6A8;
}
#maincontent {
float: left;
width: 395px;
background-color: #21B6A8;
margin: 0px 0px 5px 5px;
padding: 10px;
}
#subcontent {
float: left;
width: 175px;
background-color: #7F171F;
color: #FFF;
margin: 0px 0px 5px 5px;
padding: 10px;
}
#footer {
float: left;
width: 730px;
padding: 10px;
background-color: #7F5417;
text-align: center;
color: #EEE;
}
#footer a, #footer a:link {
color: #DDD;
}
#footer a:hover {
color: #FFF;
}
All we’ve done in this example to cater for the third column is to shrink the #maincontent div by 200px to create the space and then use this to style the #subcontent div.
I’ve then changed a few font’s and background color to spice things up a little but feel free to use it as the basis for your own sites.
Full source code: 3-column-fixed-css-layout.html
Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.
Dave,
just happened on your site about 2 weeks ago, and have been very interested in what you are doing.
As you can see i dabbled a bit and now need some help. I wanted to ask a few questions if that is ok?
how can i get my site to display correctly in the popular browsers.
As i have notices when i work in ie6 then transfer to ie7 everthing looks different.
in this tutorial, what does the opening statement do?
regards
Hi Les, you’ll probably find the following article useful…
https://dave-woods.co.uk/index.php/ie6-css-bugs-and-fixes-explained/
HiDave,
I appreciate your effort of putting such a good css stuf. I was searching CSS site and find yours with help of google search engine. I have designed and published one site and your content is very useful. I will come back to you with some of my query :).
Regards, Ravi
… How come you havent linked the relation to the style sheet? in the html you could put:
Else whats linking the style to the html?
Mmm strange my html didnt show, well try putting this, presuming you name the Stylesheet stylesheet.css.
Put in the main section and put the pointed braces around it:
link rel=”stylesheet” type=”text/css” href=”stylesheet.css”