Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Layout with full size left navbar and header

I would like to have the following layout

+++++++++++++++++++++++
+Header               +
+++++++++++++++++++++++
+Nav+                 +
+   +                 +
+   +                 +
+   +      Content    +
+   +                 +
+++++++++++++++++++++++ 

so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work. If you want to try it out yourself: http://guidefordesign.com/css_generator.php and then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work

like image 633
Dave Avatar asked Aug 11 '10 07:08

Dave


1 Answers

You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>for stackoverflow</title>
  <style>
    body, html {
        padding : 0px;
        margin : 0px;
        height : 100%;
    } 

    #wrapper {
        width:900px;
        height:100%;
        margin: 0px;
        padding: 0px;
    }

    #header {
        height:10%;
        background-color:#930;
        width:900px;
    }

    #nav {
        background-color:#999;
        width:200px;
        height:90%;
        float:left;
    }

    #content {
        height:90%;
        background-color:#363;
        width:700px;
        float:left;
    }
  </style>
</head>

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="content"></div>
</div>
</body>
like image 88
Sotiris Avatar answered Sep 29 '22 11:09

Sotiris