A Three Column CSS Layout Using Just an Unordered List
Why? For fun, of course- and to expand on a point I made today at work…
Some background- I’m working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked - “With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.” The point related to the dangers of DIV-itis and my desire** to pare down markup to its absolute (meaningful) minimum. But it also illustrates a basic idea that, once fully understood, opens up all sorts of options for problem-solving.
So, anyway, chewing on the exchange on my way home from work I was struck with the idea of doing a simple three column layout using nothing but an Unordered List. My original comment was about a UL used as a menu and tweaking it to behave like a bunch of divs (which was his original idea for the menu) or something, so I thought it might be interesting to go all out use a UL for the entire layout, tweaking the LIs in a whole bunch of different ways to suit my needs. If that doesn’t illustrate my point, nothing will.
And, yeah. I’m sure a bunch of people have already done this. It was still interesting for me to do so it was well worth the effort no matter how many people out there are yawning in my general direction.
And here it is, in all it’s List-y glory- A Three Column CSS Layout Using Just an Unordered List
Here’s the pertinent markup
<ul id="container">
<li id="header">header</li>
<li id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet... Pellentesque in erat.</p>
</li>
<li id="right-sidebar">right sidebar</li>
<li id="left-sidebar">left sidebar</li>
<li id="footer">footer</li>
</ul>
And here’s the CSS
* {
margin:0;
padding:0;
}
li {
list-style-type:none;
}
#container {
margin: auto;
width: 825px;
border: thin solid #FF0000;
position:relative;
}
#container #header {
padding: 25px;
height: 50px;
width: 775px;
border: thin dashed #999999;
}
#container #content {
padding: 10px;
width: 400px;
margin-left: 200px;
border: thin solid #0066CC;
}
#container #footer {
height: 100px;
border: thin solid #663300;
}
#container #left-sidebar,
#container #right-sidebar {
border: thin solid #FF9900;
position: absolute;
width: 200px;
top: 105px;
}
#container #left-sidebar {
left: 0px;
}
#container #right-sidebar {
right:0;
}
The sidebars are absolutely positioned- a technique I use because (a) I hate sidebars that stretch further than the content column and (b) I like to be able to push content further up in the source order so as to feed that stuff to search engines first. If it was an issue and one or both of the sidebars needed to drive the height and source order didn’t matter I could tweak it to satisfy those requirements. That said, this is my party so I’m going with the absolutely positioned sidebars 
Other than that, it should be pretty self-explanatory to anyone familiar with modern layout techniques. UL id=”container” takes the place of the traditional “wrapper” type DIV, the LIs take the place of the other section DIVs one might expect to find in any site that uses modern techniques and none of the actual CSS is all that different than what one might expect with a regular DIV based layout.
I know what you’re thinking- why is this even useful? To be honest, probably not. DIV’s are fine for this job. Separating sections of a site are what they’re designed for, so there’s no shame in using them for this purpose.
[devil's advocate]
There might be less “extraneous” markup with this technique since the UL is necessary as part of the list structure and the traditional div id=”container” or “wrapper” is only there for the purposes of layout. Also, the connection between the sibling LIs might be stronger semantically than the connection between the adjacent DIVs which don’t have any unifying structure. Other than those incredibly geeky points I’m not convinced there’s much to this beyond the thought experiment value of it all. Which is valuable. I’m just not sure I’m going to actually build any sites with this technique any time soon.
Or maybe I will.
[/devil's advocate]
Shout in the comments if I stopped making sense at any point in this post. I started yawning about thirty minutes ago so I can’t be sure of anything I’ve written in that time
*which isn’t to say I’m not down with DIV’s. I’m on the DIV train, I just know from painful experience that valid, table-less code with millions of nested DIVs can be just as miserable as any old school, nested table beast.
**which translates to the company’s desire since I’m driving the “how” of our front end practice
Scott Says:
Hey Rob,
For purely experimental purposes, I like what you’re doing. This technique reminds me of how Eric Meyer used an HTML table (and all of it’s related child elements) and used CSS to turn it into a bar graph.
We could get into a debate over the semantics of using a list to layout a page, but I don’t think that it matters. You’re illustrating, as Eric did, that CSS can control the display of ANY HTML element.
Posted: November 29th, 2007 at 2:37 pm
rob Says:
Yeah, that’s the idea. And I was definitely thinking of that example. although not that specific example as I just remembered you talking about his presentation on this subject from an event apart.
Posted: November 29th, 2007 at 2:44 pm
Chad Crowell Says:
This is great- I don’t think it has too many practical uses, due to semantics, but its really creative and shows the flexibility of CSS. A nice treat for Monday morning. Nice job.
Posted: December 3rd, 2007 at 11:56 am
Nick Dunn Says:
Excellent example and a point well made. However watch out for the possible accessibility implications. I was under the impression that screenreaders read list item counts allowed, so deeply nesting lists etc. may cause issues.
I’ve spotted this done once or twice before:
http://somerandomdude.net/srd-projects/divless/
http://jasonspage.net/blog/nodiv/
While they’re good examples of the power of CSS (and breaking the myth that you have to throw DIVs at a page to make it work), more often than not DIVs *are* the most appropriate option.
But it’s good to get people into the semantic discussions, as it will really challenge your colleague to think about why he’s using each element on the page.
Posted: December 3rd, 2007 at 12:32 pm
Rob Glazebrook Says:
So the cure for divitis is div-anemia?
Pretty darn cool from a theoretical standpoint, though I seriously hope to never see this out in the wild anywhere.
Then again, I guess there are plenty of people out there who consider it an accomplishment to create an entire website using only the and tags, so perhaps this is a step in the right direction.
Posted: December 3rd, 2007 at 5:44 pm
Rob Glazebrook Says:
Whoops… “the and tags” should read “the <div> and <object> tags”. My apologies.
Posted: December 3rd, 2007 at 5:45 pm
rob Says:
“So the cure for divitis is div-anemia? :)”
A div-ectomy?
Posted: December 5th, 2007 at 10:33 am
rob Says:
“But it’s good to get people into the semantic discussions, as it will really challenge your colleague to think about why he’s using each element on the page.”
It’s a really important thing for him as he has some basic knowledge of CSS/HTML, but never worked in any organizational or philosophic (on his own) framework where these kinds of things mattered. He’s a total hacker journeyman, so I’ve pointed out techniques and said things like “the best way to do it is x” and he’s actually been surprised that we want to do things the best way and not just the first/quickest way that comes to mind.
Left to his own devices he would just throw the first element (or dozens of elements) that came to mind onto the page and call it a day.
Posted: December 5th, 2007 at 10:44 am
Web 2.0 Announcer Says:
A Three Column CSS Layout Using Just an Unordered List…
[...]I'm working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked - "With CSS you can make practically any el…
Posted: March 3rd, 2008 at 11:12 am
Thomas Says:
Hi everybody,
When left column or right column so long then it create bad design
Posted: March 13th, 2008 at 10:40 pm
Girendra Singh Says:
Very fine tutorial. Keep it up mate. some peoples might be interested in my tutorial to create 3 columns layout using css at my blog.
Posted: March 28th, 2008 at 12:34 pm
Girendra Singh Says:
Nice info keep it up.
Posted: March 28th, 2008 at 12:35 pm
Mikhail Says:
Beautiful I’ll try it
Posted: May 6th, 2008 at 6:07 pm
mihai Says:
Nice technique, thanks for sharing.
Posted: August 26th, 2008 at 11:20 am