Why do such a thing? 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
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.
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.
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.
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.
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.
Whoops… “the and tags” should read “the <div> and <object> tags”. My apologies.
“So the cure for divitis is div-anemia? :)”
A div-ectomy?
“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.
Hi everybody,
When left column or right column so long then it create bad design
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.
Nice info keep it up.
Beautiful I’ll try it
Nice technique, thanks for sharing.
For accessibility reasons you shouldn’t use list items for structural markup; screen readers will interpret everything within the list (ie your entire website) as a list of items that it will then try to read out all in one go.
Thanks Chris. That’s really interesting. This technique was never really meant for prime time so I’ve never seen that behavior in a screen reader.
This is just what I have been looking for, after seeing http://www.studio7designs.com I was wondering how they did most of their layout on hardly any divs and styled the content using UL’s, thanks!