How to force div to appear below not next to another?

Question

I would like to place my div below the list, but actually it is placed next to the list.The list is generated dynamically, so it doesn't have a fixed hight. I would like to have the map div on the right, and on the left (next to the map) the list placed on top and the second div below the list(but still on the right to the map)

  #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>

Any ideas?

Answer 1

use clear:left; or clear:both in your 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.

Answer 2

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

Answer 3

what u can also do i place an extra "dummy" div before your last div.

Make it 1 px heigh and the width as much needed to cover the container div/body

This will make the last div appear under it, starting from the left.

Answer 4

I think what you want requires an extra wrapper 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 5

Float the #list and #similar the right and add clear: right; to #similar

Like so:

#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>

You might need a wrapper(div) around all of them though that's the same width of the left and right element.