Ask Your Question
2

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

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

oweng gravatar image

updated 2015-09-12 12:32:39 +0200

Alex Kemp gravatar image

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.

edit retag flag offensive reopen merge delete

Closed for the following reason the question is answered, right answer was accepted by Alex Kemp
close date 2015-11-10 16:38:34.830034

2 Answers

Sort by » oldest newest most voted
1

answered 2013-10-03 21:45:25 +0200

manj_k gravatar image

Apparently fixed with the update to Askbot version 0.7.49.

edit flag offensive delete link more

Comments

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

oweng gravatar imageoweng ( 2013-10-04 13:52:18 +0200 )edit
1

answered 2013-09-07 15:15:03 +0200

David gravatar image

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! :)

edit flag offensive delete link more

Comments

You are probably right @David. 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 :)

oweng gravatar imageoweng ( 2013-09-08 00:37:54 +0200 )edit

Question Tools

1 follower

Stats

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

Seen: 6,840 times

Last updated: Oct 03 '13