Disposition à deux colonnes

Question

Voici ce que j'essaie de faire.

J'ai deux colonnes. Appelons-les col1 et col2. Je le veux que si la hauteur de col2 augmente, la hauteur de col1 augmentera en conséquence à la même hauteur. Comment puis-je atteindre cet objectif? Je sais que je peux le faire en utilisant des tables, mais je suis à la recherche d'une solution basée sur CSS.

Answer 1

Il y a une tonne de tutoriels sur Google:

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=same+height+columns

Autres choses ici:

Equal height columns in jQuery

Answer 2

Comme CSS - Equal Height Columns? explique déjà la meilleure est probablement http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Fondamentalement vous avez des wrappers autour de vos colonnes et ils deviennent vos antécédents réels et non les colonnes elles-mêmes.

Answer 3

Vous pouvez simuler avec une image en utilisant la technique des colonnes de faux, mais vous pouvez le faire juste avec CSS - http://jsfiddle.net/spacebeers/s8uLG/3/

Vous définissez votre conteneur avec trop-plein de caché, puis sur chaque div ajouter margin- négatif fond et égal positif padding-bottom.

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

EDIT: Si vous voulez une bordure autour d'elle alors va voir cet exemple - http://www.ejeliot.com/samples/equal-height-columns/example-6.html