Comment faire pour forcer le div en dessous pas à côté de l'autre?

Question

Je voudrais inscrire ma div en dessous de la liste, mais en fait il est placé à côté de la liste.La liste est générée dynamiquement, donc il n'a pas fixé de hauteur. Je voudrais avoir la carte div sur la droite et sur la gauche (à côté de la carte) la liste placée sur le haut et le deuxième div en dessous de la liste(mais toujours sur la droite de la carte)

  #map { float:left; width:700px; height:500px; }
 #list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
 #similar { float:left; width:200px; background:#000; } 


    <div id="map"></div>        
    <ul id="list"></ul>
    <div id ="similar">
     this text should be below, not next to ul.
   </div>

Des idées?

Answer 1

utilisez clear:left; clear:both dans votre css.

#map { float:left; width:700px; height:500px; }
 #list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
 #similar { float:left; width:200px; background:#000; clear:both; } 


<div id="map"></div>        
<ul id="list"></ul>
<div id ="similar">
 this text should be below, not next to ul.
</div>

Answer 2

Je pense que ce que vous voulez nécessite un adaptateur supplémentaire div.

#map { float:left; width:700px; height:500px; }
#wrapper {float:left; width 200px;}
#list { background:#eee; list-style:none; padding:0; }
#similar { background:#000; } 

<div id="map"></div>        
<div id="wrapper">
  <ul id="list"></ul>
  <div id ="similar">
    this text should be below, not next to ul.
  </div>
</div>

Answer 3

#similar { 
float:left; 
width:200px; 
background:#000; 
clear:both;
}

Answer 4

Flotteur de l' #list et #similar le droit et ajouter clear: right; de #similar

Comme suit:

#map { float:left; width:700px; height:500px; }
#list { float:right; width:200px; background:#eee; list-style:none; padding:0; }
#similar { float:right; width:200px; background:#000; clear:right; } 


<div id="map"></div>        
<ul id="list"></ul>
<div id="similar">this text should be below, not next to ul.</div>

Vous pourriez avoir besoin d'un wrapper(div) autour de chacun d'eux si c'est la même largeur de la gauche et à droite de l'élément.

Answer 5

ce que u peut aussi dois-je rajouter un "dummy" div avant votre dernier div.

Faire 1 px de hauteur et de la largeur autant nécessaire pour couvrir le div conteneur/carrosserie

Cela rendra le dernier div apparaissent sous, à partir de la gauche.