Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007

Sure looks like a job for a table. But what really is the job?

The list items in the horizontal list are floats, and what floats do
when there isn't enough space horizontally is drop down below each
other.

The only way to stop that is to set an explicit width on the container.
But it's annoying and in many cases impossible to work out what width
should be manually.

Like many problems yours would be best solved by using display:
inline-block, but Firefox doesn't support inline-block.

If you're not too fussed about the exact widths and heights of the
items, you could just make them display: inline instead of float: left,
and give them some left and right padding instead of width (you can't
set width on inline items). Then set white-space: nowrap (or if that
doesn't work in IE, white-space: pre, or whatever white-space value you
eventually find that prevents line wrapping and does work in IE, if
there is one) on the ul that they're in.

Otherwise use a table as dorayme suggested. Use a table anyway since
you're doing a table.