AskLO: Can we limit the width of img, blockquote, etc.?

Currently the CSS of this site has a few definitions that allow for oversized elements in <div id="ContentLeft"> and <div class="post-body"> to cause <div id="ContentRight"> (the sidebar) to be overwritten. An example of a large image doing this can be found in this question and a blockquote with no-break space (U+00a0) in the text can be found in this question. The result is that the content of the question is difficult to read. This also affects any answers and comments.

Ideally, all content forms (img, blockquote, etc.) should be forced to either wrap within the <div id="ContentLeft"> container, or reduced in size to ensure a more elegant and user-friendly presentation. From what I can tell the issue appears to be either with inadequate div definition (inheritance) or an inadequate definition for the img and blockquote elements in these div’s. The <div id="ContentLeft"> is defined as width: 730px. As a short-term hack rather than setting .post-body img { width: 100% } a fixed pixel value could be specified. A better solution would be to specify width: 100% for all sub-containers within the parent container to ensure correct inheritance. There is no limiting definition on the blockquote element (and possibly other content-type elements) thus they are not constrained by the higher-level pixel limit.

Wouldn’t replacing the simple width: with max-width: 100%; do the trick? This is the CSS for image handling in a number of “responsive” website themes. That constrains the image to the size of the container, whatever size that may be.

For example (and for the moment), try resizing this page and compare to the size of the original image.

I’m not sufficiently well-versed in these things to know whether some value for overflow needs to be invoked as well, but there are plenty of experts around! :slight_smile:

You are probably right @dajare. I was just illustrating some ideas. That example also uses the !important property. I don’t really care how it is done, so long as it is effective. If this turns out to be the solution, I will happily mark your answer as correct :slight_smile:

Apparently fixed with the update to Askbot version 0.7.49.

Yay! This and the return of the flag offensive option are two benefits of the upgrade, so overall I feel we are making progress.