How to make a page with header and left-sidebar?

Question

I\'d like to make a webpage like this:

|----------------------------|
|            header          |
|----------------------------|
|  L  |                           


        

Answer 1

Demo : http://jsfiddle.net/nRQeA/

.top {
    width: 100%;
    height: 92px;

}
.left {
    width: 20%;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 80%

 }

Answer 2

You can also use display : table and display : table-cell to create a page that holds a table-level element with 2 table-cells (sidebar & content area)

<div id="outer-container">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

#outer-container {
    display: table;
    width: 100%;
    height: 100%;
}

#sidebar {
    display: table-cell;
    width: 15%;
    vertical-align: top;
}

#content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
}

A tutorial with a demo here : http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css

Answer 3

You just need to remove "float: left;" from your .main definition.

Also, when debugging positioning this really helps:

div {
    border: 1px solid #000;
}

Also it might be worth dropping height: 100% from .left and .main to prevent vertical scrollbar

Answer 4

Here is the simple code for you. Try this & know the quality CSS coding.

HTML:

<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">MAIN</div>
<div class="clear"></div>
</div>

CSS:

.clear{
clear:both;
} 
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}

Answer 5

LIve demo

Hi now you just do easily as like this

Css

.top {
    height: 92px;
}
.left {
    width: 178px;
    float:left;
}
.main {
  margin-left:178px;
 }

HTML

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>

Live demo

------------

Updated Demo

Answer 6

example at jsFiddle

.top {
    position:absolute;
    left:0; right:0;
    height: 92px;
}
.left {
    position:absolute;
    left:0; top:92px; bottom: 0;
    width: 178px;
}
.main {
    position: absolute;
    left:178px; top:92px; right:0; bottom:0;
}