28172 sujets

CSS et mise en forme, CSS3

upload/59601-page.jpg

Bonjour, j'aimerai recrée cette page, mais des que je rajoute plus que 2 div , les div n apparaissent plus la ou je voudrai.

enfaite je voudrai crée 2 colonnes avec 3 div l'une en dessou de l autre.
mais j ai essayé en float:left et float:right mais rien a faire.

pourriez vous m'aiguiller sur la marche a suivre , ou si vous avez un petit exemple je suis preneur.

merci pour votre réponse. Smiley cligne
Modérateur
Bonsoir,

Rien de trop compliqué à premiere vue Smiley smile
Il te faut 2 conteneur qui jouerons le rôle des colonnes. Pour les placer cote a cote tu peux utiliser displya:inline-block; plutot que float. (et attention aux espaces indésirables entre les inline-block : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html )
A l'intérieur de ces colonnes les div s'empileront tout naturellement sans rien à faire !

Ce qui donne un truc du genre :
http://fiddle.jshell.net/xhketjtj/
<div class="col">
    <div>col1 block1</div>
    <div>col1 block2</div>
    <div>col1 block3</div>
</div>
<div class="col">
    <div>col2 block1</div>
    <div>col2 block2</div>
    <div>col2 block3</div>
</div>


.col{
    display:inline-block;
    width:20%;
    background-color:#eee;
}


Ce n'est qu'une proposition parmi beaucoup de solutions.

Bon code !
Modifié par _laurent (10 Aug 2015 - 01:17)