Horizontal List

[Woden]

I'm trying to create a horizontal list, with little success. This is what I'm trying to accomplish; An Unordered List that lists horizontally, not vertically like standard behaviour. I've drawn a picture to illustrate what I'm after, and to compensate my poor explanatory skills:

Image removed

I have tried to use inline on the LI's, but with no success. I need to be able to set the List Items, or "boxes'" width and height, and that doesn't work for me when using inline. I have also tried to float the LI's, but then the container doesn't strech all the way down to the footer.

The "Container" is a div, with no set height, and should strech as far down as the List Items go. I might need to add more "boxes" later on, so I don't want to specify the height. The "Container" only contains this UL, and nothing else.

This is probably something simple, but I can't figure it out. I really appreciate any help.

[Raffles]

Float the <li> boxes and the div will stretch if you clear the floats. See the FAQ at the top of this forum on clearing floats.

Also, if your div container is only containing the ul, the likelihood is you don't need the container. The UL element behaves much like a div, it's block level, you can give it borders and background colour.

[Woden]

Thanks a bunch. It doesn't feel like the most logical solution, and it feels a little bit like a hack, but it seems to work and make a bit sense at least.

Does anyone know why you can't set width or height when using display: inline; on LI?

[Kravvitz]

Elements with display:inline may not have set widths or heights. It's the way things work. You can learn about the differences between inline boxes and block boxes here.

[Raffles]

I don't think it's a hack at all. That picture you had before shows exactly why floats exist - you want some boxes to appear side by side and if there's not enough space on the line any more, go to the next line. That's how floats work. Clearing floats is not a hack either, though in my opinion it feels a bit dirty and I don't like that concept much.

[Woden]

Ok, thanks for the info. And Raffles, it was the clearing part I was referring to. Sorry for being unclear. It doesn't feel like the most logical solution.

I encountered something else with floats and LIs, too. Lets say I float a series of LI to right, they seem to show up in reversed order. If my last LI contains a P with the content "Bye-bye", when floated right, it shows up as the first (from the left). Is there some way to reverse this, without reordering the LIs? Because I want them to show up in the same "order" as without stylesheet.