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
