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    x000D   x000D   map   float left  width 700px  height 500px    x000D   list   float left  width 200px  background  eee  list-style none  padding 0    x000D   similar   float left  width 200px  background  000     x000D   lt div id  map  gt Lorem Ipsum lt  div gt          x000D   lt ul id  list  gt  lt li gt Dolor lt  li gt  lt  li gt Sit lt  li gt  lt li gt Amet lt  li gt  lt  ul gt  x000D   lt div id   similar  gt  x000D      this text should be below  not next to ul  x000D   lt  div gt  x000D   x000D   x000D    Any ideas

User · Answer

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        lt div id  map  gt  lt  div gt           lt ul id  list  gt  lt  ul gt   lt div id   similar  gt   this text should be below  not next to ul   lt  div gt

User · Answer

I think what you want requires an extra wrapper div    x000D   x000D   map   x000D      float  left   x000D      width  700px   x000D      height  500px  x000D    x000D   wrapper   x000D      float  left  x000D      width  200px  x000D    x000D   list   x000D      background   eee  x000D      list-style  none   x000D      padding  0   x000D    x000D   similar   x000D      background   000   x000D    x000D   lt div id  map  gt Lorem Ipsum lt  div gt          x000D   lt div id  wrapper  gt  x000D     lt ul id  list  gt  lt li gt Dolor lt  li gt  lt li gt Sit lt  li gt  lt li gt Amet lt  li gt  lt  ul gt  x000D     lt div id   similar  gt  x000D      this text should be below  not next to ul  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

similar    float left   width 200px   background  000   clear both

User · Answer

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

User · Answer

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        lt div id  map  gt  lt  div gt           lt ul id  list  gt  lt  ul gt   lt div id  similar  gt this text should be below  not next to ul  lt  div gt    You might need a wrapper div  around all of them though that s the same width of the left and right element

User · Answer

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

[html] How to force div to appear below not next to another?

Examples related to html

Examples related to css