Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

asked 2013-09-07 03:26:47 +0200

oweng gravatar image

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.

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.