SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Div - bowser resize

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    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).

    Code:
    #top {
        background-color: #0F9;
        height: 200px;
        width: 100%;
    min-width:900px;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?......

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    hum....its just something that i havent noticed before.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •