Question

Here is a much-simplified example: http://jsfiddle.net/guard/MmcEY/3/
The body width is artificially rejected here, though it’s not the case for the real app – see below.

There are multiple blocks laid out similar to #d1 and #d2. All of them having min-width set.
There’s also a stripe at the bottom of the screen that must fill the whole width.

On a wide screen everything works fine – there’s enough of body width for blocks to fit, no scrolling and the stripe fills the whole screen width.

But on a narrow screen (emulated in the example with the body width explicitly set) the following happens: the content’s width is actually more than the body’s width. This content make the horizontal scrolling appear, though it doesn’t stretch the body. So, the stripe (the green line at the bottom) occupies less space than the page content.

=====

Well, great, guys, I know it’s because of margin :).

As I said, fixed body width is set here for demonstration only, in the real world the body width is defined by the window size. But several blocks are still outside of the body, so the scroll appears, while body width doesn’t change.

So, is there any way to make the stripe fill the whole window client width while preserving the rest of markup?

I’m working with the existing site, and don’t want completely re-hacking the whole layout (quite complicated and not coded by me).

Answer 1

It’s because your #d2 element has a negative margin-right set — which means that it’s going to fall outside the body element. If you remove this property then you’ll see that the block falls down to the next line (as #d1 and #d2 are both 150px).

Essentially, the layout is doing what you’re telling it to do. The stripe is always 200px wide (100% of the body width) regardless of browser window size.