I am new to CSS and want to create a layout like the following.

Header - fixed pixel height, full width of browser window. Footer - down the bottom, fixed height. Middle section, split in 2. - Navigation section on the left with a fixed width. content section, remaining width of browser window.

But, I can't get the middle section to work quite right.

Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
    <html>
      <head>
        <title>DIV test</title>
          </head>
      <body>
    <style type="text/css">
    #header {
        border:2px;
        height:100px;
        width:100%;
        border:2px;
        border-color:black;
        display:block;
        background: #A55;
    }

    #middle {
        height:400px;
        width:100%;
        display:block;
    }

    #navbar {
        height:100%;
        width:100px;
        float:left;
        position:relative;
        display:block;
        background: #2c9;
    }

    #content {
        height:100%;
        width:100%;
        display:block;
        float:left;
        position:relative;
        background: #CCC;
    }

    #footer {
        height:100px;
        width:100%;
        display:block:
        background: #A55;    
    }


    </style>
        <div id="header">header</div>
        <div id="middle">
          <div id="navbar">navbar</div>
          <div id="content">content</div>
        </div>
        <div id="footer">footer</div>
      </body>
    </html>

2 answers

o.k.w 2355
4
points

What you want is a fluid layout. Here's how you can do it:

#content {
    height:100%;
    display:block;
    /* float:left; don't float it */
    position:relative;
    background: #CCC;
    margin-left: 100px; /* use margin to accommodate the side navbar*/
}

Here's a very good reference on fluid layout:
The Perfect Fluid Width Layout (Demo)

PS: I have not test the code above on IE6, might need further tweaking.

Answered almost 7 years ago by o.k.w
0
points

My suggestion would be to ditch the "height: 100%" business. It prob'ly doesn't do what you think it does...

If you really want the site to take up (at least) the full height of the browser window, do something like this:

  • Create a fake sidebar background by: moving the content bg color to html and the sidebar bg color to a background image on html.
  • Use o.k.w's suggestion to push the content out of the way of the sidebar (margin left, not float).
  • Stick the footer to the bottom of the window using a CSS Sticky Footer.

Here's your example with unnecessary css removed (things like width=100% and display: block are implied on divs) and those three suggestions applied: http://paste2.org/p/625369

Answered almost 7 years ago by Justin Hileman