2 colonnes avec DIV .... taille maximale pour la deuxième

Question

Je possède ce code:

<div id="containerDiv" style="background-color:Lime;"> 
    <div style="float:left;width:150px; background-color:Red;"> 
     AAAA 
    </div> 
    <div style="float:left;background-color:Fuchsia;margin-left:10px;"> 
     BBBB 
    </div> 
    <br style="clear:both;" /> 
</div> 

La première colonne a fixer la taille, je voudrais que le second a le reste de la avec disponible dans le conteneur div.

Une idée?

Update1: Mon code donne ceci: http://tinypic.com/r/103x65e/6 Je voudrais que le magenta arrive à la flèche

Merci,

Answer 1

Je suis juste curieux: POURQUOI?

1. vous pouvez utiliser clearfix correctif;
2. vous pouvez utiliser faux column astuce;

Answer 2

Utilisez la propriété CSS display: table[-row|-cell]. Cela donne un comportement de type table.

Answer 3

Vous pouvez modifier la marge gauche de la deuxième colonne à 150px + 10px = 160px et supprimer le flottant: à gauche. De plus, vous pouvez ajouter la classe clearfix comme indiqué par Staicu, ce qui supprime le besoin d'un élément BR avec "clear: both". Si vous aimez avoir les deux colonnes ont la même hauteur, vous pouvez utiliser l'astuce Faux Column comme indiqué par Staicu. Si les choses se dans Internet Explorer, vous pouvez le fixer avec les informations trouvées sur positioniseverything

<div id="containerDiv" style="background-color:Lime;" class="clearfix"> 
    <div style="float:left; width:150px; background-color:red;"> 
     AAAA 
    </div> 
    <div style="background-color:fuchsia; margin-left:160px;"> 
     BBBB 
    </div> 
</div>