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

ul list tag design web page multi-column layout

Markup Language - Anchor

Vue implements scrollable pop-up window effect

Vue encapsulation component upload picture component

JavaScript Dom implements the principle and example of carousel

Detailed explanation of viewing and setting file permissions on Mac

How to implement web stress testing through Apache Bench

Detailed explanation of firewall rule settings and commands (whitelist settings)

CSS3 flexible box flex to achieve three-column layout

A brief discussion on the issue of dates containing zero values in MySQL database

Call the font according to the font name to let the browser display the font you want

Recommend

Implementation of MySQL5.7 mysqldump backup and recovery

The whole process of configuring reverse proxy locally through nginx

Solution to ES memory overflow when starting docker

Vue implements a simple shopping cart example

Native JavaScript message board

Basic usage of custom directives in Vue

How to hide and remove scroll bars in HTML

A detailed discussion of MySQL deadlock and logs

A brief discussion on the differences between several ways of executing .sh files in Ubuntu

How to use crontab to backup MySQL database regularly in Linux system

MySQL 5.7.21 Installer Installation Graphic Tutorial under Windows 10

Use thead, tfoot, and tbody to create a table

Tutorial on setting up scheduled tasks to backup the Oracle database under Linux

5 tips for writing CSS to make your style more standardized

Introduction to HTML link anchor tags and their role in SEO