Как заставить div появляться внизу, а не рядом с другим?

Question

Я хотел бы поместить свой div ниже списка, но на самом деле он находится рядом со списком. Список генерируется динамически, поэтому у него нет фиксированной высоты. Я хотел бы, чтобы карта div была справа, а слева (рядом с картой) список располагался сверху, а второй элемент div под списком (но все еще справа от карты)

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

Есть идеи?

Answer 1

использовать очистить: слева;или ясно: оба в вашем 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

Я думаю, что для того, что вы хотите, требуется дополнительный 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>

Answer 3

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

Answer 4

Пропустите #list и #similar вправо и добавьте clear: right; к #similar

Вот так:

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

Вам может понадобиться обертка (div) вокруг всех из них, хотя это одинаковая ширина левого и правого элемента.

Answer 5

что вы также можете сделать, поместив дополнительный «фиктивный» div перед вашим последним div.

Сделайте его высотой 1 px и шириной, необходимой для покрытия контейнера div / body

Это заставит последний div появляться под ним, начиная слева.

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