SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Fixed position

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed position

    Hi,
    I'm trying to make a page which is 600px wide and all centered using divs, which is fine. The problem is arising when I try to make the header div fixed so that the body scrolls underneath it. Below I have a simplified version of the strucutre I have to help make things a little clearer.

    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
        
    body {
            
    margin:0;
            
    padding:0;
            
    text-align:center;
        }

        
    #container {
            
    border:1px solid red;
            
    margin:auto;
            
    text-align:left;
            
    padding:5px;
            
    width:600px;
            
    background-color:blue;
        }

        
    #header { position:fixed; top:0; width:100%; height:100px; border:1px solid red; background-color:green;}
        #body { position:absolute; top:100px; width:100%; border: 1px solid red; background-color:purple;}
    /*  #header { position:fixed; top:0; left:0; right:0; height:100px; background-color:green; }
        #body { position:absolute; top: 100px; width:100%; background-color:blue; }*/
    </style>
    </
    head>
    <
    body>
    <
    div id="container">
        <
    div id="header">
            
    Here is the header
        
    </div>
        <
    div id="body">
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
            
    Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
        </
    div>
    </
    div>
    </
    body>
    </
    html
    If you remove the position:fixed; and position:absolute from the #header and #body declarations then you'll have the shape of the page which I'm trying to achieve.

    Thanks in advance for any help
    Bubble

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Add position: relative; to your rules for #container, which will give #header and #body the proper stacking context. Also, if you didn't already know, fixed positioning doesn't work in IE for Windows, so you may have to use a JavaScript workaround to get it working in that browser.


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
  •