28221 sujets

CSS et mise en forme, CSS3

Bonjour,

A partir de ce petit bout de code :

<div id="contenu">
   <div id="info"></div>
   <div id="promote"><div>
   <div id="encart"></div>
   <hr />
</div>


Et de ces css :

#contenu { 
text-align: left;
width: 740px;
height: auto;
margin: 3px auto 0;
background: #ffffff;
padding: 10px;
border: 1px dashed #FF9933;
}

#info {
float:left;
width: 65%;
margin: 0;
padding: 6px;
border: 1px dashed #FF9933;
}

 #promote {
float: right;
border: 1px dashed #E39400;
width: 30%;
height: auto;
margin: 0;
padding: 6px;
text-align: center;
}

#encart {
background-color: pink;
width: 30%;
height: auto;
margin: 0;
padding: 6px;
}

#contenu hr {
clear: both;
visibility: hidden;
}


Comment parvenir à positionner #encart sous #promote ?

Tous mes essais échouent et mon div #encart demeure sous #info..

J'ai édité pour préciser que #info peut s'agrandir verticalement à l'infini, que #promote aussi mais que #encart lui doit donc suivre le mouvement de #promote et uniquement celui-ci.

Merci de vos conseils.
Modifié par Philos (26 May 2005 - 11:06)
Théoriquement en mettant un float: right et un clear: both à #encart ca devrait le faire.
Un petit exemple en ligne serait le bienvenue notamment pour voire le dtd et parceque c'est plus facile de visualiser quand on a une image Smiley biggrin plutot que de s'imaginer ce que tu voudrais faire .
Merci Gilles Smiley smile

Rien en ligne à montrer encore, mais je vais tester le clear: both. Je n'ai pas encore compris à quoi il servait lors de mes lectures de tuto, vais donc m'y repencher.

Bon week end, je repasserai dire si cela a résolu ou non mon souci.
Re,

Alors, finalement, un simple float:right a suffit d-ès lors que j'ai replacé le <hr /> au bon endroit Smiley smile

Merci pour les conseils et idées !