Positioning elements with float property [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

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="id开发者_开发百科2">Kuku</div>

CSS

#lst li {
       float: left;
}

---

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.

---

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>

---

#id2 {
    clear:both;
}

Should fix it.

---

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