Two Column Layout with Unordered List

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.
<li><h2>Header Content</h2></li>
<li><h2>Left column</h2></li>
<li><h2>Right column</h2></li>
<li><h2>footer Content</h2></li>

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;}

10 thoughts on “Two Column Layout with Unordered List

  1. Brendon Pesiri

    Oh my goodness! a tremendous article dude. Thanks Nevertheless I am experiencing subject with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting an identical rss drawback? Anybody who is aware of kindly respond. Thnkx

  2. Christy

    The subsequent time I read a blog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to read, but I truly thought youd have something fascinating to say. All I hear is a bunch of whining about something that you may fix in the event you werent too busy in search of attention.

Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.