[Résolu] Faire qu'un bloc float pousse le contenu vers le bas

Bonjour, j'ai un petit problème que je n'arrive pas à résoudre

En fait j'ai un bloc conteneur d'informations. Dans ce bloc j'aimerai avoir un petit menu sur la droite. Je l'ai donc en float sur la droite. Seulement, si ce menu est plus haut que le contenu le menu ne pousse pas le bloc conteneur vers le bas et s'affiche sur les autres div présentes en dessous. Je ne sais pas si j'ai été clair, voici ce que ça donne, je pense que vous allez tout de suite comprendre :
http://zou.chezwam.info/leregistre-fr.net/astuces/divers/Divers-encore-divers-56_6.html

Puis pour résumer un peu le code incriminé :

<div class="bloc">
    <div id="options">
      <ul class="systeme">
          <li>petit menu</li>
          <li>petit menu</li>
          <li>petit menu</li>
          <li>petit menu</li>
          <li>petit menu</li>
          <li>petit menu</li>
      </ul>
    </div>
      contenu plus petit que le menu
  </div>

et pour la partie css :

.bloc
{ 
  padding-left:6px;
  padding-right:0px;
  padding-top:5px;
  padding-bottom:5px;
  margin:0;
  text-align:left;
}
#options
{
  border:1px dotted red;
  float:right;
  width:200px;
}

j'ai donc essayé de rajouter <div style="clear:both"></div> mais ça fait descendre mon conteneur au niveau de la fin de la colone de menu située sur la gauche. Après un peu de doc je vois que clear accepte aussi left et right, mais aucun des deux ne fonctionnent

Pour l'instant je n'ai pas encore trouvé de solutions

Merci d'avance pour votre aide
Modifié par Niiccoo (05 Apr 2005 - 20:27)

Essaye de mettre un spacer après ton float :


html :

<div class="spacer">&nbsp;</div>

et css :

.spacer {clear : both;}

Tu vas voir en plus avec les spacers ont peu faire des miracles en mise-en-page.


FoW

FoW a écrit :
Essaye de mettre un spacer après ton float :


html :

<div class="spacer">&nbsp;</div>

et css :

.spacer {clear : both;}

Tu vas voir en plus avec les spacers ont peu faire des miracles en mise-en-page.


FoW

ouais, la chanson de Sheila fait des merveilles pour la mise en page

Salut, merci pour vos réponses

cependant j'avais déjà essayé cette méthode, et voici ce que ça donne (recliquer sur le lien plus haut :s)

après je ne place peut etre pas le spacer au bon endroit, mais je pense avoir essayé tous les endroits où je pourrai le placer

Hého!!! spice di moqueur!

FoW a écrit :
Hého!!! spice di moqueur!

meuhhhh non, j'utilise aussi le Spacer moi
c'est très utile.

Niiccoo> UL est une balise comme une autre, alors ça ne sert à rien de rajouter un 2ème div en plus...

Edit: il n'est pas possible de mettre un spacer dans une liste UL, sauf dans un LI vide...
si la bordure sur l'a mise sur le UL ça risque d'être plus compliqué
mais rien n'est impossible.
Modifié par anthony (05 Apr 2005 - 20:01)

anthony a écrit :

meuhhhh non, j'utilise aussi le Spacer moi
c'est très utile.

Niiccoo> UL est une balise comme une autre, alors ça ne sert à rien de rajouter un 2ème div en plus...

Si je t'ai bien suivi ça veut dire que je peux supprimer <div id="options"> et laisser seulement <ul class="systeme"> ? Parle t'on bien du même ul ?

Ayé !! j'ai enfin réussi

pour la méthode :
- affichage de la div de droite (le ptit menu)
- affichage de la div de droite
- affichage d'une div spacer (clear:right et non pas both)

et comme ça, ça marche, /me a pas tout comprit mais est content lol


Merci encore :=)

Heureux de t'avoir aidé.


Pense à éditer ton titre et mettre un [résolu].




FoW

Voilà c'est fait ;=)