CODEWITHSUNDEEP
htmlcss
Vonder
Vonder

Reputation: 4051

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

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

Any ideas?

Upvotes: 81

Views: 269743

Answers (6)

simhumileco
simhumileco

Reputation: 34525

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

Upvotes: 0

Todd
Todd

Reputation: 1674

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

Upvotes: 42

Matthew Vines
Matthew Vines

Reputation: 27561

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.
</div>

Upvotes: 75

Jonny Haynes
Jonny Haynes

Reputation: 3186

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.

Upvotes: 7

Terry
Terry

Reputation: 5262

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.

Upvotes: 1

Kyle
Kyle

Reputation: 67194

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

Upvotes: 10

Related Questions