фон не покрывает всю площадь

Question

взгляните на это jsfiddle. как вы можете видеть, высота левого и правого div не совпадает с высотой центрального div. Как я могу расширить боковые divs и сделать высоту такой же, как центральный div? Я пробовал использовать высоту: 100%; но я не получил результат, который хотел.

мой HTML:

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

мой CSS:

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

Answer 1

Вместо плавающих дивы вы можете использовать в качестве альтернативы display: table-cell; так, что высоты однородны независимо от их содержания.

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

Answer 2

Вы можете либо указать высоту для каждого DIV, или установить их, чтобы быть 100%, и поместить их в контейнер DIV: Вот моя модификация вашей скрипкой:

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> 

Answer 3

Причина этой неравномерной высоты обусловлена ​​количеством содержимого, которое вы вложили. Вы можете указать максимальную высоту каждого DIV или использовать display:table-cell; как предложено ADRIFT так: -

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