Saturday, June 12, 2004

CSS 4-panel layout using DIVs

You'd think it would be simple, right? Oh, young grasshopper, you have much to learn! Actually, it's not all that bad, just tedious to get a layout up and running. Took me about 2 hours of trial-n-error, and looking at some of the sites over at the CSS Zen Garden. Finally, Michael Pick's blog entry about the CSS Zen Garden proved to be the most useful as I teased apart his DIVs and his CSS file. Mike's page was already close to the layout that I wanted and his CSS file was pretty simple.

My goal for this blog's design is a navigation bar across the top of the page, a footer at the bottom of the page, a side-bar containing links to the various archive pages, and a main body that is 80-85% of the page width. This is somewhat similar to the diagram under section 9.6.1 (Fixed positioning) of the W3C.org CSS2 Specification, except that I don't want to use fixed positioning.

First, start with the following HTML file (see what it looks like):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS 4-panel layout example (June 2004)</title>
<style media="screen" type="text/css">
body {
background-color: White;
color: Black;
font-family: verdana, arial, helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
#Main {
background-color: Blue;
}
#TopNav {
background-color: Fuchsia;
margin: 0;
padding: 2px;
}
#SideBar {
background-color: Gray;
clear: none;
float: left;
margin-top: 0px;
padding: 2px;
width: 14%;
}
#BlogBody {
background-color: Orange;
height: 200px; /* must be larger then height of SideBar to fix IE6 glitch */
margin-bottom: 10px;
margin-left: 15%;
margin-top: 10px;
padding: 2px;
}
#Footer {
background-color: Purple;
clear: both;
padding: 2px;
}
</style>
</head>
<body>
<div id="Main">
<div id="TopNav">foo foo foo foo foo foo</div>
<div id="SideBar">sidebar<br>sidebar<br><br>sidebar<br>sidebar<br>sidebar<br>sidebar</div>
<div id="BlogBody">
blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body blog body
</div>
<div id="Footer">footer-copyright</div>
</div>
</body>
</html>

Yes, those are very ugly colors. But it does make it very easy to see where the various panels have ended up on the page.

Bugs:

  1. [IE6] If the content of the "BlogBody" DIV does not contain enough text to make the height of the DIV more then that of the "SideBar" DIV then the body panel will not display properly. The work-around is to specify a CSS height value that is larger then the height of the "SideBar" DIV. I'm going to play around with the design some more and see if I can get rid of that issue (and get the side-bar to be the full height of the page).
Posted by Thomas at 17:44
Labels: , ,

No comments:

Post a Comment