Question

I would like to set max-width on a container element whose child elements are floated. How do I do it?

By default, the max-width property doesn’t work in the given scenario (but min-width does). Here’s a fiddle that you can use to help me with the question.

Look in the fiddle’s preview pane — this is what I am talking about (.dropdown-menu class defines the relevant style):

But this is what it’s supposed to look like (somewhat):

Answer 1

These quotes should answer the question:

A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.

You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.

For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow.

– via Smashing Magazine

So, your only options are min-width and width.