How to use div+css make three columns in html.
left and right columns width:auto, and middle one need width:990px(should be in the center) and they are height:100%.
HTML
<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div>
<div style=" float:left; width:990px; height: 100%;">Area2</div>
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div>
For this type of functionality you can use display:table property for this. Like this:
html,body{height:100%;}
div{
display:table-cell;
height:100%;
vertical-align:top;
}
Check this http://jsfiddle.net/K5H4e/
But it's not work till IE7 & below.
display:table; is nice, but unfortunately it has the drawback to expand their cells just like real tables do. This is mostly unwanted in layouts;)
this will be easier using a table with three column .
table should only be used for tabular data.
general you shoud use something like this: Example on js-fiddle.
<div style="float:left; background-color:#006;" >Area1</div>
<div style="float:right; background-color:#006633;">Area3</div>
<div style="border:1px solid red;overflow:auto;" >Area2</div>
Note: You won't get the height of the rows align that easily, since they are independent elements.
EDIT:
in order to have the height:100%work on your divs, you need the following:
html, body {
margin: 0;
padding: 0;
height: 100%; /* important! */
}
div {
min-height: 100%;
}
EDIT2: updated fiddle
<div class="Division"><p>First Division</p></div>
<div class="Division"><p>Second Division</p></div>
<div class="Division"><p>Third Division</p></div>
.Division{
float: left;
width: 100px;
height: 200px;
border: 2px solid #000000;
margin-left: 10px;
}
How about this: jsfiddle
<div style="width:auto; height: 100%;background-color:#006;
display: inline">Area</div>
<div style="width:990px; height: 100%; display: inline">Area2</div>
<div style="width:auto; height: 100%;background-color:#006633;
display:inline">Area3</div>
