How to make a div size automatically, but keep it from breaking at the window's edge?

Question

I have a pure CSS rollover menu that displays a sub nav on rollover. I would like the width of this sub nav to be whatever it needs to be for the content to display (i.e. I do not want to hard code a width in the CSS). However, if I don't hard code a width in the CSS, the div breaks near the edge of the window and the content wraps. If I do set a width, I get the desired effect (except that the div is a hard coded size) and the content doesn't wrap, it just extends. Is there a way to have both?

Answer 1

You might want to look at Superfish, especially the option with "Supersubs", http://users.tpg.com.au/j_birch/plugins/superfish/#sample5

It automatically adjusts the subnav item to the width of the contents.

Answer 2

DIVs don't break. Unordered lists break. Content inside lists break, but divs without set width always take up the entire width of the page (before adjusting for margins).

What you want is to keep the content in the div from wrapping, which can be done with:

 #navItem {
   white-space: nowrap;
 }

There are more complicated ways of having dynamic widths using min- and max-width, or by using javascript, but neither is consistent across browsers.