But you also want a header and footer. The first time I tried to create the Holy Grail of CSS layout, I found myself scratching my head until it was almost raw. The organization I work for loves this layout and up until recently, was only achieved by using tables. Since I’ve been pushing tableless layouts and standards, I’ve become the go to gal for all questions concerning this. So I figured I’d write a basic tutorial. I know there are plenty out there but I’m just going to add one more. This one will be fairly basic but I’m hopeful that it will help those that had the same issues I did.
I think it’s helpful to visualize the CSS as a table while you’re getting used to achieving the layout with CSS. Using a table as an example, the Holy Grail consists of 3 rows and 3 columns with the header and footer being merged cells.
The first thing you want to do is create a container, think of this as a table that will hold your information.
<div id="container" ></div>
The CSS that you could use may go something like this:
#container {
width:760px;
margin:0 auto;
text-align:center;
}
The “margin:0 auto;” will center your div on the page (of course there is more that goes into it than that but this is basic, remember?)
Next, create the div that will hold your header information (think of this as your first merged cell row in the table).
<div id="header"></div>
The css that you could use may go something like this:
#header {
width:760px;
height:230px;
}
So far your code would look like the following:
<body>
<div id="container">
<div id="header">Header Content Goes Here.</div>
</div>
</body>
Moving right along, lets go ahead and create the CSS for the rest of the page:
#leftnav {
width:130px;
float:left;
}#mainContent {
width:430px;
float:left;
}
#rightnav {
width:200px;
float:right;
}#footer {
width:760px;
height:50px;
}
So let’s finish off the coding in the XHTML page. In keeping with the table theme, your left nav would be column 1, content, column 2 and the right nav column 3 all living in row 2. The footer would be the 2nd merged cells row or the 3rd row. Remember, everthing goes inside the container, because that’s our table.
<body>
<div id="container">
<div id="header">Header Content Goes Here.</div>
<div id="leftnav">Left Nav Content Goes Here.</div>
<div id="mainContent">Your Main Content Goes Here.</div>
<div id="rightNav">Right Nav Content Here.</div>
<div id="footer">Footer Stuff Here.</div>
</div>
</body>
Finally, to get everything to stack correctly, you’re going to want to clear the header and the right nav. Think about the clear attribute as a break tag you’d use for text. You can do it the way I’ve done it below or write the clear attribute in your CSS.
Final layout XHTML code:
<body>
<div id="container">
<div id="header">Header Content Goes Here.</div>
<div style="clear:both"></div>
<div id="leftnav">Left Nav Content Goes Here.</div>
<div id="mainContent">Your Main Content Goes Here.</div>
<div id="rightNav">Right Nav Content Here.</div>
<div style="clear:both"></div>
<div id="footer">Footer Stuff Here.</div>
</div>
</body>
It can be much more complicated than I describe above but this will get you on your way. Another thing to keep in mind and maybe this can be a later tutorial but if you add padding or margin’s to any of your containers, you’ll need to subtract that from your width’s, otherwise, things will get wonky for lack of a better term.
Comments are currently closed, but you can trackback from your own site.
My name’s Jen; I’m a cynical, sarcastic, ex-drummer who is fond of dark humor. I've held way too many factory & retail jobs but finally found my calling one Christmas holiday in a dark, musty basement. I am now a CSS & XHTML web standards looney and can be found daily—when I’m not at my Mac—at the local fair-trade coffee shop buying an iced-soy mocha no matter the temperature.
I am also the owner of Pop Stalin Design specializing in CSS & XHTML web design as well as custom WordPress themes.
