SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two "fixed" sidebars?

    I'm a little stumped here. I have a simple three column layout going, but I want to position: fixed both sidebars so they stay in place at the top right and left corners of the page while the main content, a fluid column, scrolls in the middle of the page. I can get the left div fixed without a problem and it works nicely, but the problem falls with the right one. If I give it a position: fixed, it layers on top of the left one, all other position: tags don't keep it in place. I can't seem to figure what I'm missing. Hopefully someone understands what I'm trying to say and has an idea how to make this work. Thanks!

    Here is what I'm trying to do, in a rough sort of way:

    |--Fixed Position--|----Fluid Main Content (Scrolls)----|--Fixed Position--|

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried it like this?
    #rightsidebar {
    position: fixed;
    right: 10px;
    top: 100px;
    }
    The default position is viewport top left, margins works in positioned direktions, like they do on floats.
    Happy ADD/ADHD with Asperger's

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Remember that IE6 doesn't support position:fixed so you will need to give ie6 position:absolute instead and let it scroll with the page.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #right,#left{
        position:fixed;
        width:200px;
        background:red;
        top:0;
    }
    * html #left,* html #right{position:absolute}
    #right{right:10px}
    #left {left:10px}
    #content{
        margin:0 220px;
        min-height:0;
        background:green
    }
    * html #content{height:1&#37;}
    p{padding:5px;margin:0 0 1em 0;}
    </style>
    </head>
    <body>
    <div id="content">
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
        <p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
    </div>
    <div id="left">
        <p>fixed left column</p>
        <p>fixed left column</p>
        <p>fixed left column</p>
        <p>fixed left column</p>
        <p>fixed left column</p>
        <p>fixed left column</p>
        <p>fixed left column</p>
    </div>
    <div id="right">
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
        <p>fixed right column</p>
    </div>
    </body>
    </html>
    Or you could use an expression for IE6 if you are worried about IE6 or there are some complicated css methods to get IE6 to work but they are a little shaky in real use.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Here's the above with an expression added for IE6.

    http://www.pmob.co.uk/temp/fixed-sidebars.htm

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks Paul. I was missing the actual x,y positioning (top, right, etc). Also, thank you for the IE6 hack. One question about it, in the code you have :

    Code CSS:
    * html {/* fix jitters when using expression*/
    background-image: url(image.jpg);
    }

    What is the image of, or is it just left over from something else? It's not in the temp directory.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    What is the image of,
    Its not an image of anything but it just tricks ie into thinking the background has an image and draws the background nicely. Otherwise the fixed sidebars jitter. You should really uses a non-repeated 1px x 1 px transparent gif to avoid server log errors.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, ok. Thanks for that Paul.


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
  •