CSS Multi Column List

perappgui · 12-13-2008, 04:27 PM

Hello all. I've been playing with CSS to try and make my unsorted lists show in a multi column view opposed to a vertical list. After playing around for a while I figured a way to do it. I just have two issues hopefully someone can help with.

First I created a new stylesheet with the following:
#multi ul {
width: 700px;
list-style-type:none;
}
#multi li{
width:180px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
float:left;
}

Within my page I just wrapped my unsorted list the following way.
<div id="multi>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<p></p>

The list displays correctly, meaning the list is broken into columns side by side, but unless I put that <p></p> at the after the </div> elements below the div, like a horizontal line, floats up in the middle of the page. If I put the <p></p> then everything lines up correctly.

However. The other problem I have is, when I put the <p></p> after the div, and everything lines up correctly, it shows up fine in Firefox. In IE however, there is a huge space between the unsorted list and the content above (which is just text).

Any direction would be greatly appreciated.

Excavator · 12-13-2008, 06:19 PM

Hello perappgui,
your <p></p> is clearing the float. There are better ways to do that though -

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background: #eeeeee;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#wrap {
	width: 760px;
	background: #fff;
	margin: 0 auto;
overflow: auto;
}
#multi ul {
width: 700px;
list-style-type:none;
background: #6F0;
overflow: auto;
}
#multi li{
width:180px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
float:left;
}
</style>
</head>
<body>
    <div id="wrap">
<div id="multi">
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>

    <!--end wrap--></div>
</body>
</html>

I put a color in each element to show it. Remove the two overflow:auto; lines to and watch what happens to the background colors.

Read about clearing floats here.

The code you posted has an error in it - it's missing a "

Quote:

Within my page I just wrapped my unsorted list the following way.
<div id="multi>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<p></p>

Excavator · 12-13-2008, 06:34 PM

Ok, playing with this a little more...
I gave it a little margin and padding to make it look nicer. You can see how the li's are ordered though.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multi-column ul</title>
<style type="text/css">
body {
	background: #eeeeee;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#wrap {
	width: 760px;
	background: #fff;
	margin: 0 auto;
	overflow: auto;
}
#multi ul {
	width: 700px;
	margin: 20px auto;
	padding: 0 0 15px 0;
	list-style-type: none;
	background: #6F0;
	overflow: auto;
}
#multi li{
	width: 180px;
	float: left;
	margin: 15px 0 0 0;
	padding: 0 10px 0 10px;
	line-height: 15px;
}

</style>
</head>
<body>
<div id="wrap">
        <div id="multi">
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
                <li>six</li>
                <li>seven</li>
                <li>eight</li>
                <li>nine</li>
            </ul>
        </div>
<!--end wrap--></div>
</body>
</html>

You would need to order your li's like this to place them in the correct column -

Code:

<div id="multi">
            <ul>
                <li>one</li>
                <li>four</li>
                <li>seven</li>
                <li>two</li>
                <li>five</li>
                <li>eight</li>
                <li>three</li>
                <li>six</li>
                <li>nine</li>
            </ul>
        </div>

Look at a 2-column list example here.

perappgui · 12-13-2008, 06:40 PM

Thanks for the reply and advice. I added the overflow and it worked perfect in FF. However in IE, it doesnt seem to translate as well. It places the list at the bottom of the page so there is a large gap between my page heading and the list. FF, looks great though. Any ideas?

Oh and the missing quotation after multi was a typo. =)

Excavator · 12-13-2008, 06:46 PM

The code I posted works correctly in FF3, IE7 and IE6.
If it's actiing weird when you try to incorporate it into your site we'll have to see your code.

A link would be best but if you quote your code here, please use code tags.

perappgui · 12-13-2008, 07:11 PM

Whelp, you are great. I actually just fiddled with the width of the UL and everything is displayed correctly within all browsers.

The site is actually on my local machine, or I would've sent a link. Thank you for your help.