[résolu]Positionner 2 menus l'un en dessous de l'autre et le conten.

Bonsoir !

Voilà, j'ai trois blocs, et j'aurais aimé savoir comment faire (si c'est possible) pour positionner les 2 l'un en dessous de l'autre, et le troisième à droite. Exemple :

<!-- Bloc 1 -->
<div class="bloc1">
<ul><li>Lien</li><li>Lien</li><li>Lien</li></ul>
</div>

<!-- Bloc 2 -->
<div class="bloc2">
<ul><li>Lien</li><li>Lien</li><li>Lien</li></ul>
</div>

<!-- Bloc 3 -->
<div class="bloc3">
Texte
</div>

Alors la solution logique serait d'englober le bloc 1 et le bloc 2, de les mettre en float:left, et de mettre le bloc 3 en float:right; sans oublier de leur définir une valeur, mais le problème (si c'en est un), c'est que je voudrais faire sans :

C'est-à-dire sans rajouter aucune balise à ce code, j'aurais aimé pouvoir mettre le bloc 1 et le bloc 2 l'un en dessous de l'autre, et le bloc 3 à droite, normalement...

(En passant, je sais que j'ai mis des <div> inutiles: là où il est possible de mettre les classes aux listes directement, mais ce n'est qu'un exemple, pas besoin de me donner ce conseil )

J'ai essayé multiples manières pour arriver à mes fins, en vain. La solution s'approchant le plus serait de mettre un float:left sur le bloc 1, et un float:right sur le bloc 3 (en ne mettant rien au bloc 1), mais évidemment que ça ne fonctionne.

En bref, ma question est: sur 3 blocs frères, comment faire que les 2 premiers blocs soient l'un en dessous de l'autre, et le troisième positionné à droite de ces 2 blocs (en fait, fusionner les 2 blocs).

Merci d'avance

Et bonne année... !
Modifié le 04 Jan 2005 - 11:35

Enlever un <div> ?

<!-- Bloc 1 et 2-->
<div style="float: left; width: value;">
<ul><li>Lien</li><li>Lien</li><li>Lien</li></ul>
<ul><li>Lien</li><li>Lien</li><li>Lien</li></ul>
</div>

<!-- Bloc 3 -->
<div style="margin-left: value;"> <!-- Largeur de Bloc 1 et 2-->
Texte
</div>

Stephan> Oui oui mais ça revient (presque) à la même solution d'englober les 2 blocs. Et j'aurais préféré faire sans...

Igor> Bah ta solution me donne ceci (logiquement) :


Lorsque je mets le float:left sur le bloc 1, et un float:right sur le bloc 3, ça me donne cette solution sauf que le bloc 3 se trouve à la place du bloc B (c.f. image) (mais la longueur s'allonge bien en fonction du contenu).

En bref, ma question est simple si c'est possible de pouvoir faire comme ceci :


Mais en laissant le code tel quel, juste en CSS (et sans utiliser de positionnement absolu de hauteur). Donc en fait, de fusionner les blocs 1 et 2 pour leur mettre un float:left aux 2 (sans que le float:left n'affecte les 2 blocs entre eux), et mettre un float:right au bloc 3.

Bon bien sûr, c'est pour imaginer ma solution, mais peut-être qu'il me faudrait utiliser quelque chose d'autre (comme des margin ou je sais pas quoi)...

Merci quand même !
Modifié le 04 Jan 2005 - 10:41

Je sais que de rajouter un bloc juste pour le placement ça fait un peu mal au coeur, je n'aime pas non plus, mais franchement c'est la solution la plus propre et la plus simple que je vois pour ce problème... D'ailleurs j'ai moi même adopté un layout similaire (avec à droite un div en colonne contenant plusieurs blocs).

Bon disons que ça me fait pas mal au coeurs plus que ça ( ) mais je voulais juste savoir si c'était possible de le faire...

Apparemment pas, bon ben tant pis, je ferai sans... Merci à tous !

Nyro Xeo a écrit :
Stephan>
Igor> Bah ta solution me donne ceci (logiquement) :
upload/29-blocsdisposit.png

Tu as testé ?

Moi j'obtiens exactement ce que tu cherches à obtenir : "En bref, ma question est: sur 3 blocs frères, comment faire que les 2 premiers blocs soient l'un en dessous de l'autre, et le troisième positionné à droite de ces 2 blocs (en fait, fusionner les 2 blocs)."'

Le bloc de droite (bleu) s'allonge tout simplement en fonction du contenu :

J'avais oublié de mettre le float:left sur bloc 2

Ca marche, merci beaucoup !!

De rien je commençais à douter