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

Be Sociable, Share!

10 Responses to Two Column Layout with Unordered List

  1. Valuable info. Lucky me I found your site by accident, I bookmarked it.

  2. admin says:

    Hello Dental hygiene
    I’m hoping to publish more articles on unordered lists. It can replace unwanted use of Divs

  3. maria andros says:

    Great work keep it coming, best blog on earth

  4. admin says:

    Thanks for the encouragement. Hoping to replace not only html tables, I’m gonna replace Divs too. unordered list will give more power to css/html coding.

  5. Zona Wawers says:

    very good post, i definitely love this website, carry on it

  6. 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

  7. Gazety says:

    Hello, awesome blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, let alone the content!

  8. Christy says:

    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.

  9. buy tramadol says:

    Great work, webmaster, nice design!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


eight × 9 =