Aller au contenu

css postinnnement bloc float


Lentreprenaute

Sujets conseillés

Bonjour,

colonne gauche = arrivée des données "div"

colonne droite la facon dont je voudrais mettre en page les divs

div-position.gif

je veux donc caler sur la droite les blocs gris et sur la gauche les blocs bleus dans un div container materialisé par le cadre noir. les div ont des hauteurs jamais identiques,

Note il peut y avoir de 1 à x blocs bleu. Je n'y arrive pas sous firefox, une idée ? je ne vous propose pas mon css une pure ...

merci à celui qui me depatouillera

Florent

Modifié par Lentreprenaute
Lien vers le commentaire
Partager sur d’autres sites

A mon avis c'est plus une question de logique de code (php ou autre) qu'une question de CSS pour faire la distinction entre les blocs gris et bleus.

Question CSS, c'est simple à faire: Les blocs bleus doivent avoir un "float:left;clear:left" alors que les blocs gris doivent seulement avoir un "float:left"

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

bonjour dan,

avec ca j'approche mais en faisant come tu me l'indiques pas du tout !

en fait je n'arrive pas a remonter le dernier bloc gris sur la droite (celui qui se trouve sous les bleus) , il se cale en bas a droite a la fin des bleus.

je me demande si c'est realisable? si le float n'a pas sa limite du genre couliser deux div et point barre!

.blocsBleu {
width: 620px; padding-top: 5px; background-color: #fff;
}
.menu1gris {clear:both;width:345px;background-color:red;float: right;}
.menu2gris {clear:both;width:345px; background-color:yellow;float:right;}
.menu3gris {clear:both;width:345px; background-color:blue;float:right;}

Modifié par Lentreprenaute
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

Voila un bout de code, css et code html basique, puisque je suis en train de recommencer a zero

l'objectif etant d'aligner tous les menus a droite l'un sous l'autre, je n' suis pas arrivé sous firefox le pb reside principalement pour le div menu3 qui est palcé en fin de page!

body {
margin: 0px; font: 11px arial, helvetica, sans-serif; color: #666; background-color: #588bc4; text-align: center
}

#container {
background-color:green; margin-left: auto; width: 990px; margin-right: auto; text-align: left;}

.blocs {
width:620px;background-color: #fff;
}
.menu1 {clear:both;width:345px;background-color:red;float:right;}
.menu2 {clear:both;width:345px; background-color:yellow;float:right;}
.menu3 {clear:both;width:345px; background-color:blue;float:right;}

<body>
<div id="container">
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="blocs">blabla....blabla....blabla....blabla....blabla....blabla....blabla....blabla
</div>
<div class="blocs">blabla....blabla....blabla....blabla....blabla....blabla....blabla....blabla
</div>
<div class="blocs">blabla....blabla....blabla....blabla....blabla....blabla....blabla....blabla
</div>
<div class="menu3">menu3</div>
</div>
</body>

Modifié par Lentreprenaute
Lien vers le commentaire
Partager sur d’autres sites

Le plus facile serait de créer 2 divs au lieu d'une:

- une a gauche avec float:left; clear:left pour les blocs de menus

- une à droite de celle-là avec float:left pour ton contenu.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...