CSS float arbitrarily wrapping non-quirks mode despite having room

I have come across a weird problem where floated elements wrap to the next line when there is still plenty of space for them. I realize this can be solved by removing the < p > or the < div > but I want clean valid code. Most importantly I want to know why this is happening.

HTML:

<div class="section" style="width: 8000px;">
    <div style="" class="bottom">
        <div class="img6"></div>
        <p class="n">
        <a href="index.html" class="b t1"></a>
        <a href="a.html" class="b t2"></a>
        <a href="ab.html" class="b t3"></a>
        <a href="abc.html" class="b t4"></a>
        </p>
    </div>
</div>

CSS:

p.n{margin:0;}
div.section{width: 8000px;}
div.section:after{content:"开发者_如何转开发";display:block;clear:left;}
div.section div{float:left;}
a.b{display:block;float:left;}
div.img6{background:#933;width:78px;height:15px;}
a.t1{background:#123;width:74px;height:15px;}
a.t2{background:#456;width:86px;height:15px;}
a.t3{background:#555;width:92px;height:15px;}
a.t4{background:#786;width:126px;height:15px;}

Or you can see it here at JSbin

One interesting thing worth noting is that no matter how many elements you add only the last one is wrapped.

---

This is happening because the p is not floated left. If you inspect the elements with for example firebug, you will see that the wrapper div.bottom has the exact width of it´s largest, unfloated, block level element, p.n, 378px.

If you float p.n as well, your problem is solved.

---

The problem is that floating the .bottom div left reduces its width and therefore everything it contains. Try changing div.section div {float: left} to div.bottom div {float:left}.

If you need to float everything, consider floating the external content right and/or specify fixed widths.