equal columns list display 1

[roblasch]

I was wondering if the gurus hanging around here would be interested in tackling this problem that has confounded me. I am trying to display a list in columns that run accross the page. I want as many columns as the page width will allow, with the resulting column length equal (or close to it). I can accomplish this easily enough in ie, but not quite in firefox. I am floating the li elements and giving them a fixed width. The list is inside a div that has a border and there is a h1 tag at the top of the list and an h2 tag before the list. The problem with ff is that the list spills below the border of the bounding div. I can fix this by applying a height value to the div, but I want it to take on the size of the column lengths as they change (liquid). The ultimate goal is to place a second list inside of the div as well, but that completely breaks the page, as the second h2 text falls into line with the list elements instead of aligning itself below. Is this possible in firefox, or am I wasting my time?

 

[Vragabond]

It is possible. What you are ignoring are html/css standards defined by the W3. They say that floated elements are taken out of document flow and do not contribute to the height of the parent element nor interfere with the position of other elements. If you put a dummy element after all the floated one that clears the float, the whole concept will work. That's the easiest solution to implement. If you want more complicated one, there is one without the extra dummy element, but I would have to look for it first. This way you just add something like this at the end of floated elements (put css into stylesheet for final page):

<div style="clear: both; height: 0; margin: 0; padding: 0;"></div>

 

[roblasch]

Thank you very much. That works and I have no problem with the dummy element. I am now able to move forward and that is always such a great feeling!