CSS Float border overlap issues

bordercsscss-floatfirefoxoverlap

I'm trying to float a menu to the left of the page, and when it gets large enough to reach the content below, Firefox bumps the content over exactly as it should… except for the border.

Here is a screenshot with a few items:

http://i.stack.imgur.com/o56aZ.png

And another with several items

http://i.stack.imgur.com/J7MGB.png

"Box 4" gets moved over as expected, but its border stays at the left. O.o

HTML:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
            </div>
            <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
        </body>
    </html>

CSS:

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: inline;
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    padding-left: 2px;
    padding-right: 2px;
}

#box4 .content {
    display: inline;
}

Best Answer

I think you'll not be able to do this with css alone because you're fighting the normal flow. Elements normally are stacked on top of each other and trying to ask one to move out of the way as you go down the page is not how this works.