[SOLVED] Multi Column Unsorted List [/SOLVED]

[ABU]

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.


  info
  info
  info
  info
  info
  info
  info
  info
  info




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

However. The other problem I have is, when I put the 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.

[ABU]

I figured it out. I added the overflow element and shortened the width of my UL. All works fine in all browsers.

The finished code:

Code: Select all

#multi ul {
	width: 600px;
	margin: 20px auto;
	padding: 0 0 15px 0;
	list-style-type: none;
	overflow: auto;
}
#multi li{
	width: 180px;
	float: left;
	margin: 15px 0 0 0;
	padding: 0 10px 0 10px;
	line-height: 15px;
}