Wie erzwinge ich div so, dass es nicht neben einem anderen erscheint?

Question

Ich möchte meine div unterhalb der Liste platzieren, aber tatsächlich ist es neben der Liste platziert.Die Liste wird dynamisch generiert, so dass es keine feste Höhe hat. Ich möchte die Karte div auf der rechten Seite haben, und auf der linken Seite (neben der Karte) wird die Liste auf der Oberseite und die zweite div unter der Liste (aber immer noch auf der rechten Seite auf der Karte) platziert

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

Irgendwelche Ideen?

Answer 1

Ich denke, was Sie wollen, erfordert eine zusätzliche Wrapper div.

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

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

Verwendung clear: left; oder klar: beides in deinem 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 3

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

Answer 4

was kann u auch platziere ich einen extra "Dummy" div vor dem letzten div.

es 1 px heigh Stellen und die Breite so viel benötigt, um den Container div/body

Damit wird die letzte div erscheinen unter ihm zu decken, von links beginnend.

Answer 5

Float der #list und #similar das Recht und fügen clear: right;-#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> 

Sie könnten einen Wrapper benötigen (div) um alle von ihnen aber, dass die gleiche Breite ist des linken und rechten Elements.

Answer 6

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

Hier ist ein fiddle.