Css template with content first?

I’m looking for a modern three column template. I’ve been able to find a few but most of them seem to have a lot of extra code, mostly hacks for much older IE versions.

I’m looking for one that will work with Firefox, Safari, IE9-7 and has a side bar on each side of the content but in the code the content comes first. Any suggestions?

Yes, that’s exactly what it’s for. As I mentioned though, they could be eliminated since this is a fixed width site.
There is a brief explanation of the div structure in the center column of that page.

in your demo, what’s with the innerwrap and all the negative margins? Is that for the full-height columns?

Glad it helped. Do check out Ray’s demo as well… I expect his to have lots of little niceties for various browsers and little bugs I usually ignore : )

A note: while it’s totally legal to have - in tokens (id’s and classnames), I tend to avoid them for two reasons:
1, Opera has or had (maybe it’s been fixed) some issue with -'s in classnames… at least, I have seen specific Opera hack relying on this “bug” (and I’ve used it once!)
2, I feel safer when writing Javascript with either camelCase or underscores in my tokens.

*edit haha, I see even my pseudocode is terrible:



That makes PERFECT sense! Thank you very much, I know a little bit of CSS - enough to make me dangerous. Using your example above I’ve came up with this so far:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" >
body {
    font-size: 100%;
    margin: 0;
    padding: 0 0 20px; /*IE needs this for #wrapper bottom margin*/
html {overflow-y: scroll;} /*keep scrollbar present in FF*/

/* ***** Layout Structure ***** */
#wrapper {
	width: 960px;
	margin: 15px auto 0;

#main-container {
	width: 780px;
	float: left;

#content {
	width: 590px;
	float: right;

#left-bar {
	width: 180px;
	float: left;

#right-bar {
	width: 170px;
	float: right;

#footer {
    clear: both;
    height: 1.75em;
    line-height: 1.75em;


<div id="wrapper">

<div id="main-container">

<div id="content">
<p>Testing 1 2 3</p>
</div> <!-- end content div -->

<div id="left-bar">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>

</div> <!-- end left-bar div -->
</div> <!-- end main-container div -->

<div id="right-bar">
<li>Link 10</li>
<li>Link 20</li>
<li>Link 30</li>

</div> <!-- end right-bar div -->

<div id="footer">
Copyright &copy; 2010
</div> <!-- end footer div -->
</div> <!-- end wrapper div -->


I still need to add a header to the page but I don’t think that will be hard. Just add it above the content and left/right bars.

Thanks again!

Stomme - it’s funny you mention that about having “-” in my ID names. When I was typing it I was thinking to myself if it would matter to use “-” or “_”. I’ll switch to underscores per your reasons above.

I used Holy Grail for a post-content sidebar of a flex-width page (my personal website) and IE6 has such trouble (because of the non-fixed width) that I decided it was too much trouble to use on any production sites unless they were fixed width.

Well, the easiest type to understand I believe is the float-container one.
I dunno what your level of CSS is. This is pseudo-code:

<middle>main content</main>

main-container is as wide as middle and left and floated left.
inside, main has a set width and is floated right. Left is floated left.

(Normally in most designs left comes first, because usually it’s the only one floated… here, because we want both sides to start at the same height, both sides must be floated in opposite directions)

right side is then floated right.

Calculate the math carefully, and then add a bit of leeway. You can also addd a bit of flexibility to your containers by using em-sizing instead of px (esp if your fonts are set in something flexible like em’s which is generally recommended).

Does this make sense or do you need a code example?

Holy grail works but it’s a bit complicated to understand and it’s also a bit hard to debug when it acts weird.

That is basically how I do content first layouts too. I prefer that extra wrapping div at the cost of avoiding the relative positioned methods.


That example uses an additional div for the equal height columns. However with a fixed width layout it could be eliminated and a repeating image could be used for faux columns.

Stomme - I’m looking for something that has everything a fixed width (ie. sidebars, header, and main content). Footer is nice but certainly not needed.

I thought one of my books about web programming had a good explanation to do this but so far I haven’t been able to find it.

Are the sidebars fixed width? Is the center/content fixed or flex? Is there a footer?

I thought there was one in the CSS stickies here, but to be honest I’d have to check first for sure. The Holy Grail setup doesn’t have too many hacks for IE really, and is fairly basic code but is stuck with fixed-width sidebars. The float-container option is even more static, where the middle content part cannot stretch.

Guess you’d need to list a few more specifics, if you have them.