SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    webpage resizes when content requires a slider bar

    hi,

    i am having some problems with a website. some pages fit onto a full screen and some have a lot of vertical context which require a slider bar. When i go onto a page which requires a slider bar the web browser pushes the content to the left, and then back again when it doesnt need one.

    I was wondering if anyone knew how to deal with this? if i make the page a fixed width would this work?

    Thanks

    Robert

  2. #2
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds more like a css question, but since your already here:

    Code CSS:
    html { overflow-y: scroll; }
    html, body { height: 100%; }

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note that overflow-y is a CSS3 property and not valid CSS2.1. You can achieve the same with valid CSS2.1 too,
    Code CSS:
    html {overflow:auto; height:100%; padding-bottom:1px}
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome! thank you very much. that worked a treat

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is normal behavior and the average user is unlikely to notice it.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what does the overflow css property actually do?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It controls what happens to content for which there isn't room within the parent's generated box. The default is visible, which means the overflow is visible outside the parent's box. The opposite is hidden, which clips any overflow. Other options are scroll (the browser should provide scrollbars) and auto (similar to scroll, but the scrollbars are only visible when needed).

    Setting overflow to something other than visible causes some side-effects, too. The element's margins won't collapse, and it will automatically expand to contain floated children.

    You can read more about overflow in the SitePoint CSS Reference.
    Birnam wood is come to Dunsinane

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    PS: overflow:hidden; will only clip content when there is a set height (there are exceptions) otherwise it will just enclose it's children.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •