CODEWITHSUNDEEP
htmlcss
KnightMax
KnightMax

Reputation: 33

How to use div+css make three columns in html

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>

Upvotes: 0

Views: 4630

Answers (5)

me_digvijay
me_digvijay

Reputation: 5492

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>

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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.

Upvotes: 2

rejo
rejo

Reputation: 3350

<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;
}

Upvotes: 0

Christoph
Christoph

Reputation: 51181

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

Upvotes: 0

Aymanadou
Aymanadou

Reputation: 1220

this will be easier using a table with three column .

Upvotes: 0

Related Questions