ul list tag design web page multi-column layout

I suddenly thought of this method when I was writing a three-column layout with CSS a few days ago. I think this idea is a bit crazy. If there is anything wrong with it, please feel free to point it out.
When I need to write a three-column layout, I usually choose to use the following DIV layout:

Figure 1 DIV layout
Using such a nested 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 subsequent maintenance. When laying out navigation, we often use a method, which is to use the <ul> list for layout. Navigation can be described as a multi-column layout. In this case, we can also use <ul> to perform a multi-column layout of the page.

Figure 2 DIV layout This is a fixed width layout, which means that the fluidity is not strong. The fluidity layout has not been tested yet. I will test it when I have time. The code of this layout is posted 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;
}
#content ul {
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#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 top middle</li>
<li>This is the lower middle part</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 in IE7 and FF3. Other browsers have not been tested. If you have a better method, please feel free to propose it.

<<: Docker implements re-tagging and deleting the image of the original tag

>>: Specific use of MySQL binlog_ignore_db parameter