Positioning elements with float property

Question

Why here the div is on the same line with the list ?

Answer 1

Because every list item is floated left, and when you float something to the left the next item will end up on its right side.

Basically, the DIV ends up to the right of the list for the same reason the second LI ends up to the right of the first LI.

If you want to separate them, add this between the list and the DIV.

<div style="clear: both;">Div</div>

Answer 2

Because you apply "float: left" to every single <li>, making them "lined up" one after the other from left to right.

Using #lst { (instead of #lst li {) will make the list appear from top to bottom and the DIV beside it. (If that's not what you want, use CSS clear to get rid of the floating.)

Search Google for "css float" to learn more about positioning elements.

Answer 3

#id2 {
    clear:both;
}

Should fix it.

Answer 4

If you give some styles to the div, here is how it looks:

http://jsfiddle.net/9LrUs/

To avoid this, you need to give the div a clear:both. Here is the example:

HTML:

<ul id="lst">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="id2">Kuku</div>

Style:

#lst li {
       float: left;
}

#id2 {
    clear:both;
}