css float 和边框问题

Question

我得到了这个 CSS:

.post-user {
    background:black;
    color:white;
    width:auto;
    float:left;
}
.img-side {
     border-style:solid;border-width:medium;width:75px;margin-bottom:2px;
}
.top-head {
    background:cyan;
    width:100%;
    height:20px;
    display:block;
}
.main-box {
    border-style:solid;
    border-width:1px;
    display:block;
    height:auto;
}

html 看起来是这样的:

<div class="main-box">
    <div>
        <div class="top-head"><span>At top</span>
        </div>
        <div class="side">
            <div class="img-side">
                <img src="http://st2.gsmarena.com/vv/pics/htc/htc-snap-1.jpg" width="75px" height="75px" />
            </div>
        <div class="post-user">User name</div>
        </div>
    </div>
</div>

demo

但是 div post-user 超出了边界。

我该如何解决？ (P.S.:有点类似论坛的布局)

Answer 1

http://jsfiddle.net/PGFTz/5/我在 post-user 之后添加了一个清晰的修复程序，使其能够保留在框内。