Div contracts when browser produces scroll bars


my base div should stay at 100% width because I haven’t specified any specific width.
For some reason when the browser is reduced in width so that scroll bars are present the bottom div seems to stay at the width of the smaller browser size, so when you move the scroll bars the div stays at the smaller size?

Can’t work it out at all.

The page is:


Please help if you can

Thanks in advance.


Thanks for that Paul, it worked!!
Best of all I understand exactly what was wrong now.



It’s about the fourth time this question has been asked this week for some strange reason :slight_smile:

When you specify 100% width then you get 100% width which means from one side of the viewport to the other (assuming no parents of course).

If you have some content inside that 100% width that forces a scrollbar then that element will stick out of the side of the viewport. If you then scroll to see that element the background of the current element will stop at the viewport edge because that is 100% wide. Any content that needs to be scrolled to is greater than 100%.

This is just the way that browsers work and will happen on most sites if you try the same thing.

The solution is to set a min-width on your base element to the size of the widest element in that div. This will ensure that when a scrollbar appears the whole element is set to the same width and therefore the background will be intact.


So what do you suggest?

#base {width: 100%;}

I’ve tried this and it doesn’t work?

my base div should stay at 100% width because I haven’t specified any specific width.

Both your divs id=“outer_container” and id=“base_inner” has a width style associated with them.

Because div id=“base” has not width associated with it and it contains div id=“base_inner” it’s width becomes that of the contained div.