ansaurus

Question

CSS Layout with full size left navbar and header

Answer 1

A:

You might want to have a look at and get the idea from:

Super Simple Two Column Layout

See the demo here.

Sarfraz 2010-08-11 07:37:09

Answer 2

A:

A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/ - these let you define grids.

Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html

Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
    body {
        padding: 0px;
    }
    .Container {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #123456;
        color: black;
    }
    </style>
</head>
<body>
    <div class="Container">
    </div>
</body>
</html>

The MYYN 2010-08-11 07:39:36

Answer 3

A:

A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...

Naruto 2010-08-11 07:53:28

Answer 4

+1 A:

Hello friend. You can try this. It works on the browsers I tested. firefox,ie 7&8,opera,safari,chrome. Just play with the percents for header and columns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Sotiris 2010-08-11 09:23:21

ansaurus

tags:

views:

answers:

CSS Layout with full size left navbar and header

related questions