Hey chaps…something that i havent noticed before…so im obviously doing something fundamentally wrong
if you have a look at this link and then resize the browser window so that its below the dark green width.
If you move the horizontal browser bar, the green background on the #top is just white…
what am i doing wrong?
cheers
in advance
Nothing - that’ just the way css works.
You have specified 100% as the width of that element and 100% for that element will be whatever the viewport width is at the time.
You can’t expect the element to be 100% wide and then suddenly be 150% wide because you want to scroll outside.
If you want the lightgreen to match the darkgreen’s width the set a min-width (won’t work in ie6 though).
#top {
background-color: #0F9;
height: 200px;
width: 100%;
[B]min-width:900px;
}[/B]
hum…its just something that i havent noticed before.
Resizing the browser is fine…just when using scrollbars. What ive also noticed is that upon browser resize, the horizontal scrollbars appear prior to being less than the dark green block (about 250 px before)…can this be changed in some manner?..
It happens on nearly all fluid sites. Close the window on this forum page quite small and then scroll right and look at the jquery ninja add at the top and you will see that it changes to white because it was set to 100%.
Resizing the browser is fine…just when using scrollbars. What ive also noticed is that upon browser resize, the horizontal scrollbars appear prior to being less than the dark green block (about 250 px before)…can this be changed in some manner?..
That’s because you set the width to 1025px but the green block is only 900px.
The scrollbar appears at the 1025px width you set exactly as it should
You still need to apply the min-width to #top because #top is 100% wide and at some stage 100% will be less than the 1025px of the child element which will then just poke out of the side like all visible overflow.