Aller au contenu

Sujets conseillés

Posté (modifié)

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
Posté

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"

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
Posté

Hello,

Peux-tu nous montrer ton code complet (HTML + CSS) s'il te plaît ?

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
Posté

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.

Posté

Oui dan mais mon pb 'est ce bloc "menu 3 gris qui vient apres les blocs bleus qui est le fruit du resultat que je veux afficher en colonne droite!

c'est bete mais je me demande si c'est faisable !

Veuillez vous connecter pour commenter

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



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