Menu
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?
732
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
css prevent new line div // You should use a <span> element instead, which is inline. // Although it's bad form, you can add style="display: inline;" to a div.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
