CODEWITHSUNDEEP
csshtml
Hrvoje Golcic
Hrvoje Golcic

Reputation: 3686

div doesn't stretch 100% width of a page if window width narrower then the rest of the content

If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.

But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?

The problem I found on many pages, including StackOverflow:

enter image description here

So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?

I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?

Upvotes: 1

Views: 2319

Answers (3)

jwinn
jwinn

Reputation: 1125

Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)

This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.

Upvotes: 2

Gabriel C. Troia
Gabriel C. Troia

Reputation: 3330

You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.

The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.

To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.

Upvotes: 2

Michael P
Michael P

Reputation: 604

The "cut-off" div has a width of 100% of the visible area, so everything is ok. The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.

To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:

position: absolute;
left: 0;
right: 0;

Upvotes: 2

Related Questions