Here is another demonstration of building a two column layout using the unordered list <ul> tag. Assume that you’ve been asked to code the following layout.

We can code the above layout using the unordered list <ul> tag. Let us now take a look at the way of coding it.

Initially you need to declare the HTML code as below.
<ul>
<li><h2>Header Content</h2></li>
<li>
<ul>
<li><h2>Left column</h2></li>
<li><h2>Right column</h2></li>
</ul>
</li>
<li><h2>footer Content</h2></li>
</ul>

Secondly, I’m going to show you how to use CSS styles to build the required layout.

ul {list-style-type:none; margin:0; padding:0;}

Above style class will remove the default margins, padding and list style from the unordered tag. Now comes the formatting header, footer and the content.

Even though  this is a two column layout, the width in all three parts top,mid and bot will be the same. So we can declare a common style class for it.

ul li {float:left; width:960px;}

li.mtop {height:50px; background-color:black; color: white;}

li.mmid {height:400px; background-color:green; color:black;}

li.mbot {height:50px; background-color:gray; color: black;}

Now we need to implement the content part which is going to have two columns. Let’s style the middle container unordered list to get the left and right column.

ul.ulmid li.mleft{width:200px;background-color:green;height:400px;}

ul.ulmid li.mright{width:760px;background-color:gray;height:400px;}

After styling like this, you’ll get a layout as shown in the diagram. But this layout will align the left which needs to be fixed.

We can use the UL style to achieve that. In order to achieve it will change the style class as shown below.

ul {list-style-type:none; padding:0; margin: 0 auto 0 auto; width:960px;}