I have seen in some web pages that blank spaces is added after divs (specially in header and footer areas) when the browser window is resized. I found the solution is using min-width for those area.
For seeing the problem I said please resize any page of Stack Overflow.com, for example the page you are reading now. I’ve seen many sites with this problem.
But why is it so? Why is it needed? Div is a block element and should be stretch to this parent width when no width is defined, so the header, and footer should be 100% without any blank space.
Here’s a screenshot:
Yes, as a block level element, it will stretch to it’s relative containers width. That is to say, any parent or container that has a non-static position or has dimensions. If there are no elements in the hierarchy that have a set dimension or position, then the window is used. The
<html>and<body>elements aren’t actually the elements the width is based upon by default. By default, the window is actually setting the size of the<html>and<body>elements, which are block*, and even though its children are running outside of it, the element will still get smaller.So what you are seeing is the size of the
<body>element getting smaller, even though the contents on the page are running off the end.* NOTE:
<html>and<body>are not actually block, but they can be thought of as block level for this purpose.