CODEWITHSUNDEEP
htmlcss
syrkull
syrkull

Reputation: 2344

the background is not covering the whole area

take a look at this jsfiddle . as you can see, the height of the left and right div are not the same with the height of the center div. How can I extend the side divs and make the height as the same as the center div? I tried using height:100%; but I did not get the result that I wanted.

my HTML :

<div id="left">
    dfsfdsf
</div>
<div id="center">
fldskjflsjfls
    <br/>gdfgdfg
</div>
<div id="right">
fdsflsdf    
</div>

my CSS :

#left {float:left;width:100px;background:blue;}
#center {float:left;width:100px;background:purple;}
#right {float:left;width:100px;background:green;}

Upvotes: 0

Views: 83

Answers (3)

Vivek Sadh
Vivek Sadh

Reputation: 4268

The reason of this uneven height is due to the amount of content you put in. Either you can specify a maximum height of each div or use display:table-cell; as suggested by Adrift like this:-

#left {display: table-cell;.....................}
#center {display: table-cell;........................}
#right {display: table-cell;..............................}

Upvotes: 0

John Kroetch
John Kroetch

Reputation: 1143

You can either specify a height for each div, or set them to be 100% and put them in a container div: Here's my modification to your fiddle:

Modification to Your jsFiddle

<div style="height: 100px;">
<div id="left" style="height: 100%;">
    dfsfdsf
</div>
<div id="center" style="height: 100%;">
    fldskjflsjfls
    <br/>gdfgdfg
</div>
<div id="right" style="height: 100%;">
    fdsflsdf    
</div>
</div>

Upvotes: 1

Adrift
Adrift

Reputation: 59769

Instead of floating the divs you can alternatively use display: table-cell; so that the heights are uniform regardless their content.

http://jsfiddle.net/scyxC/2/

#left {display: table-cell;width:100px;background:blue;}
#center {display: table-cell;width:100px;background:purple;}
#right {display: table-cell;width:100px;background:green;}

Upvotes: 5

Related Questions