Max-width override for wider contained objects?

[Makosuke]

In my non-fixed layouts, I like to set max-width on main content objects to prevent lines of text from getting unreadably long in the event somebody maximizes their window on a huge widescreen monitor.

Only problem comes when, on occasion, I have a bit of content in the body that is wider than the max width, either a large image or a table. The object will overflow its container in this case, which is obviously not the desired effect; I'd rather the contained object's width overrode the max-width setting on the container.

Some Googling turned up the suggestion to float the container, which will induce this behavior, but I'm having trouble actually applying that to more complex layouts. Is there some better and/or more clever way of doing this? What do y'all do in this situation?

(On a semi-related side note, out of sheer curiosity I tried giving a display: float property to the body element, which seemed to completely override the max-width of contained elements. Weird, but interesting--I wonder what's inducing that behavior.)

 

[angelwatt]

(On a semi-related side note, out of sheer curiosity I tried giving a display: float property to the body element, which seemed to completely override the max-width of contained elements. Weird, but interesting--I wonder what's inducing that behavior.)

Well that's an invalid value for the display property. So the results would likely vary from browser to browser.

To your main topic, would a JavaScript solution be acceptable? I'm not saying I have one on hand, but didn't want to think about it too hard if you're only interested in a CSS solution. Essentially you would look for all tables and images (and what other tags you want to set possible exceptions for) then check their width, and if it's too wide, set the container width to auto.

 

[Makosuke]

I'd much prefer a CSS solution to a JS one; I dislike using Javascript unless absolutely necessary, and was mostly hoping for a "drop in" solution. Such a thing might not exist, of course, but it seems like this would be a pretty common thing to want. I guess max-width just isn't that heavily used?

Well that's an invalid value for the display property. So the results would likely vary from browser to browser.

Sorry, I typed that wrong; I meant to say I'd given the body element the property float: left, not display: float.

Still doesn't make sense, though it appears that it doesn't technically violate the spec; at least, it says that the float property can be applied to all elements, and the validator doesn't report it as an error. Regardless, and even though both Webkit and Gecko treat it the same, it's mostly a curiosity, not something I'd want to actually use.

 

[cromwell64]

have you tried setting the overflow property on the container? using that you can either clip the content that is too big or have it create scrollbars if the content is too big.