picture picture
décembre 20, 2007 CSS 1 Commentaire

Rendre un calque conteneur extensible en fonction d’un contenu variable..

pas si simple … quand il y a deux calques à l’intérieur !

La question était de savoir comment positionner 2 calques côte à côte dans un calque relatif, en obtenant un effet d’allongement du calque conteneur en fonction d’un contenu variable

Là où cela se corse, c’est quand on veut un footer, ou une image en pied de page, qui lui aussi reste en bas de page en fonction de ce contenu variable :C
Pour visualiser, rien ne vaut une image :

Cela peut sembler simple … J’ai un peu cherché quand même :o !

Le code qui fonctionne avec les navigateur Mozilla et Internet Explorer est le suivant :

<body>
<div style="position:relative; margin-left:100px; margin-top: 100px; background-color:#000000; width: 300px;">

<div style="float: left; margin-left:10px; margin-top: 10px; background-color:white; width: 100px">
Beatus vir qui non abiit in consilio impiorum et in via peccatorum non stetit et in cathedra pestilentiae non sedit
Sed in lege Domini voluntas eius et in lege eius meditabitur die ac nocte
</div>

<div style="float: right; margin-right:10px; margin-top: 10px; background-color:yellow; width:100px">
Non sic impii non sic sed tamquam pulvis quem proicit ventus a facie terrae,
Ideo non resurgent impii in iudicio neque peccatores in consilio iustorum
Quoniam novit Dominus viam iustorum et iter impiorum peribit
</div>

<div style="clear:both; color:#CCCCCC"> nettoit-tout </div>

</div>

<div style="position:relative; margin-top: 20px; color:grey"> mon footer de bas de page est ici ! </div>
</body>

thx

One Response to “Rendre un calque conteneur extensible en fonction d’un contenu variable..”

One Comment

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: