Débordement d'un conteneur div horizontalement mais pas verticalement

Question

Je travaille sur un site Web qui utilise deux colonnes à l'intérieur d'un conteneur. Le conteneur a un arrière-plan blanc qui doit s'étendre au fond de la colonne la plus haute, donc j'utilise la méthode holy grail pour cela.

Cependant, les deux colonnes doivent être placées de manière à ce qu'une partie de celles-ci dépasse le fond blanc (this example utilise une hauteur fixe, qui devrait être fluide). Pour autant que je sache, cela ne peut être fait en mettant le débordement à visible, mais cela brise la hauteur égale des colonnes.

Comment résoudre ce problème avec le moins d'éléments supplémentaires possible?

Answer 1

La solution la plus simple dans ce cas semble être d'ajouter <br style="clear:both" /> avant l'étiquette de fermeture pour #container.

Vous pouvez le remplacer par <br class="clearfix" /> et .clearfix{clear:both} si vous le souhaitez.

Answer 2

solution est d'utiliser des éléments inline-block ..

Css

.container{ 
    width:300px; 
    background-color:#ccc; 
    margin:0 auto; 
    border:1px solid red; 
} 
.container > div{ 
    width:150px; 
    display:inline-block; 
    vertical-align:top; 
} 
.inner{ 
    background-color:#666; 
    margin-top:10px; 
    width:130px; 
} 
.left .inner{ 
    margin-left:-10px; 
} 
.right .inner{ 
    margin-right:-10px; 
    margin-left:auto; 
} 

HTML

<div class="container"> 
    <div class="left"> 
     <div class="inner">left 1st inner panel</div> 
     <div class="inner">left 2nd inner panel</div> 
    </div><div class="right"> 
     <div class="inner">right 1st inner panel</div> 
     <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div> 
    </div> 
</div> 

view demo