html element with percentage width needs to have a minimum width of its inner static content

html element with percentage width needs to have a minimum width of its inner static content

Hello, I'm trying to create a fluid / responsive layout. Is there any way to force an html element that has a percentage width to have a minimum width of its inner content? That is, if i开发者_Go百科t's inner content has some sort of static width, like 200px?

Here’s an example: http://www.nathanielkessler.com/div/csshelp.html

If, in IE9 you set it to Quirks mode and resize the windows in and out, it behaves exactly like I want. (notice how the second div on the right pops under the first div on the left when the screen is resized inward).

If you set the document back to IE9 Standards mode and then resize inwards you'll see that the outer red bordered div does not respect its inner contents (the yellow box). I just continues to shrink beyond what should be its boundary.

Is there any way to make it behave like it does in quirks mode? (Without JavaScript)

Thanks, I ended up finding a pretty specific css/html combination that gave me the behavior I was after. Works in all major browsers including ie7 to ie 9.

Basically, in a row of left floating elements, if you give the first element a min-width % setting and the rest of the elements a combination of min-width % + width % ... you get a fluid layout that forces elements to drop under their sibling elements when the browser window shrinks.

Here's a working example, try resizing the browser. http://www.nathanielkessler.com/div/cssfluid.html

I think what you want is the min-width CSS attribute. Set .item { min-width: 200px; }