Wie kann man zwingen, div nicht neben einem anderen zu erscheinen?

Ich möchte mein Div unter der Liste platzieren, aber tatsächlich wird es neben der Liste platziert. Die Liste wird dynamisch generiert, sodass sie keine feste Höhe hat. Ich möchte das Karten-Div rechts und links (neben der Karte) die Liste oben und das zweite Teil unterhalb der Liste (aber immer noch rechts neben der Karte) haben.

#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">Lorem Ipsum</div>        
<ul id="list"><li>Dolor</li></li>Sit</li><li>Amet</li></ul>
<div id ="similar">
    this text should be below, not next to ul.
</div>

Irgendwelche Ideen?

Ich denke, was Sie wollen, erfordert einen zusätzlichen 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">Lorem Ipsum</div>        
<div id="wrapper">
  <ul id="list"><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
  <div id ="similar">
    this text should be below, not next to ul.
  </div>
</div>

benutze klar: links; oder klar: beides in deiner 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>

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

Float das #listund #similardas Recht und fügen Sie clear: right;zu#similar

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

Möglicherweise benötigen Sie einen Wrapper (div) um alle, obwohl dies die gleiche Breite des linken und rechten Elements hat.

Was du auch tun kannst Ich platziere ein zusätzliches "Dummy" -Div vor deinem letzten Div.

Machen Sie es 1 px hoch und die Breite so viel wie nötig, um den Behälter div / Körper zu bedecken

Dadurch wird das letzte Div von links beginnend darunter angezeigt.

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