2009-04-05 6 views
7

J'ai 2 float: left div, le premier est fixe et je veux que le second div étire l'espace restant.Stretch droite float div largeur?

<div id="container"> 
<div id="leftform"> </div> 
<div id="rightform"> </div> 
</div> 

Toute idée? Merci

Répondre

8

En CSS2:

#container {display:table; table-layout:fixed;} 
#leftform, #rightform {display:table-cell;} 
#leftform {width:100px;} 

Dans le monde de l'IE hacks:

#container {padding-left:100px;} 
#leftform {float:left; width:100px; margin-left:-100px;} 
+0

La version de hacks IE est la manière habituelle de le faire sur n'importe quel navigateur. L'utilisation de 'table-cell' directement dans 'table' sans 'table-row' n'est pas définie même si la table supportée par le navigateur affiche des valeurs. – bobince

+1

@bobince: vous avez tort. CSS nécessite la génération automatique d'éléments de table anonymes manquants. Il est spécifié et fonctionne de manière fiable: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes – Kornel

0

utiliser une fonction javascript pour faire à la fois la même hauteur.

//fixing column height problem using Prototype 
Event.observe(window,"load",function(){       
    if(parseInt($('leftform').getStyle('height')) > parseInt($('rightform').getStyle('height'))) 
     $('rightform').setStyle({'height' : parseInt($('leftform').getStyle('height'))+'px'}); 
    else 
     $('leftform').setStyle({'height' : parseInt($('rightform').getStyle('height'))+'px'}); 
});//observe 

même problème here.

Questions connexes