CSS uses ul for multi-column layout of web pages

Author：Eve Cole Update Time：2009-05-31 01:02:37

I suddenly thought of this method when I was writing a three-column layout with CSS a few days ago. This idea seems a bit crazy to me. If there is anything wrong with it, please feel free to give me some advice.

When I need to write a three-column layout, I usually choose to use the following DIV layout method:

Using such a nesting method can undoubtedly reduce the probability of code errors a lot, but at the same time, such a layout is also slightly complicated and slightly inconvenient for later maintenance. A method we often use when laying out navigation is to use the <ul> list for layout. The navigation can be described as a multi-column layout. In this case, we can also use <ul> to layout the page. Multi-column layout.

This is a fixed-width layout, which means it is not very fluid. The fluid layout has not been tested yet. I will try it again when I have time. Paste the code of this layout below:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Using UL for multi-column layout</title>
<style type="text/css">
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear:both;
}
#footer {
clear:both;
padding-top:10px;
}
#content {
height:300px;
margin:10px auto;
}
#contentul {
list-style:none;
height:100%;
}
#contentulli{
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#contentulli#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head>

<body>
<div id="mainContent">
<div id="header">This is the header</div>
<div id="content">
<ul>
<li>This is the left side</li>
<li id="li2″>
<ul>
<li>This is the upper part of the middle</li>
<li>This is the lower part in the middle</li>
</ul>
</li>
<li>This is the right side</li>
</ul>
</div>
<div id="footer">This is the bottom</div>
</div>
</body>
</html>

This code can be displayed normally under IE7 and FF3. It has not been tested on other browsers. If you have a better method, please suggest it.