je dois positionner 6 div à l'intérieur d'un div principal.
Mon problème, c'est que je souhaiterais que la zone 3, 4 ou 5 puisse pousser la zone 6 (voir image).
Actuellement, seules la zone 3 (et 2) pousse la zone 6.
Comment modifier mon css ou le html pour que n'importe quelle des colonnes (zone 3, 4 ou 5) pousse le pied de page (zone 6).
Voilà mon css :
| CODE |
| body { text-align:center; } #principale { width:650px; margin-right:auto; margin-left:auto; margin-top:10px; padding:0px; text-align:left; background-color:#FFFFCC; } /* #principale { position: absolute; width: 750px; left: 50%; margin-left: -375px; background-color:#CCCCFF;; } */ #zone2 { width:300px; padding:0px; float:left; background-color:#CC0000; } #zone3 { width:300px; padding:0px; /* float:left;*/ background-color:#006600; } #zone4 { width:175px; padding:0px; float:left; background-color:#FFCC00; } #zone5 { width:175px; padding:0px; float:left; background-color:#99CC00; } #zone1 { width:650px; background-color:#0099CC; } #zone6 { position:absolute; width:650px; background-color:#9900CC; } |
et le html
<div id="principale">
<div id="zone1">ZONE1</div>
<div id="zone2">ZONE2</div>
<div id="zone4">ZONE4
Colonne 2
blabla blabla blabla
blabla blabla
blabla</div>
<div id="zone5">ZONE5
Colonne 3
blabla blabla
blabla blabla blabla</div>
<div id="zone3">ZONE3</div>
<div id="zone6">ZONE6</div>
</div>
Merci d'avance de vos réponses
Franck