StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>My guess is that this is because 'width: 100%' means the width of the browser window, rather than the entire width of the page, is there a way to fix this?</p> </blockquote> <p>100% means it'll be as wide as the parent element it is positioned relative to (in this case, <code>body</code>, the width of which will be based on the width of its parent, <code>html</code>). Which will be as wide as the browser window, unless you specify otherwise. </p> <p>The problem is, you have another child of <code>body</code> which can be wider than <code>body</code>: both <code>#container</code> and <code>#footer</code> are styled such that they will always be at least <code>1026px</code> wide. This does not widen their parent elements, as we've already established that those will be as wide as the browser window; instead, they <em>overflow</em> their parents. The default response to this is to display scrollbars so that you can scroll and view the overflowing content; if you added the style <code>overflow:hidden</code> to <code>html</code> or <code>body</code>, you'd find your content and footer clipped to the size of the browser window, and no scrollbars displayed. </p> <p>There are a couple of easy solutions to this:</p> <ol> <li>Wrap #content and #footer in #upbg instead of preceding them with it. Then remove the existing styles, and style it as follows: <code>position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0;</code> This accomplishes two things: you're no longer specifying a width for #upbg, thus allowing it to become wide enough to enclose its new children, and it allows you to get rid of a lot of now-unnecessary styling (you'll want to clear out the padding you've set for <code>body</code> as well, along with some style on <code>#content</code>). Alternately,</li> <li>Get rid of the minimum width on <code>#content</code> and <code>#footer</code>, so they don't overflow.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload