Question

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

HTML

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

CSS

#lst li {
       float: left;
}

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>