Div ajustement automatique largeur à l'élément écran/parent

Question

Je suis sûr que c'est simple mais ...

Je donne les résultats suivants:

http://jsfiddle.net/SUBH3/1/

HTML:

<div id='wrapper'> 
    <div id='panel1'></div> 
    <div id='panel2'></div> 
    <div id='panel3'>gest</div> 
</div> 

CSS :

#wrapper 
{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
} 
#panel1 
{ 
    position:relative; 
    top:0px; 
    left:0px; 
    float:left; 
    height:100%; 
    width:35px; 
    background-color:blue; 
} 

#panel2 
{ 
    position:relative; 
    top:0px; 
    left:0px; 
    float:left; 
    height:100%; 
    width:240px; 
    background-color:red; 
} 


#panel3 
{ 
    position:relative; 
    top:0px; 
    left:0px; 
    float:left; 
    height:100%; 
    background-color:green; 
} 

Ce que je veux, c'est que le dernier panneau vert remplisse le reste de l'espace. J'ai essayé quelques petites choses mais je ne peux pas le faire. Je peux utiliser une table pour réaliser ce que je veux, ce que je ferai probablement, je veux juste savoir comment je peux le faire avec css?

J'ai essayé ceci avec des éléments de liste aussi, mais finis avec le même problème.

Merci,

Chris.

Answer 1

Je comprends, je comprends. Vous faites flotter les deux autres panneaux, mais si vous ne faites pas flotter le dernier, cela remplira le reste de l'espace. Normalement, il flotte autour du fond des deux conteneurs de gauche, mais comme ils sont à 100% de hauteur, ce n'est pas le cas.

Ainsi vous devez utiliser cette règle de style:

#panel3 
{ 
    height:100%; 
    background-color:green; 
} 

http://jsfiddle.net/hGWyF/

Answer 2

Retirez les deux flotteurs et la position, il va remplir le reste de l'espace par défaut, car tous les éléments ont une hauteur de 100%.