Working with DIV's & CSS

Question

OK, if anyone could help me with this I'd be much appreciative. If you copy and paste the following and open up in IE or Firefox

<div style="border: solid 1px navy; float: left;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div style="background-color: blue;">
    <p>Some Text</p>
    <p>Another paragraph</p>
</div>

Why does the second div which has a blue background expand to be behind the first div that contains the list of items? How do I get it to really float next to the first div?

Answer 1

The reason you are seeing the behavior you describe is because those are the instructions you are giving the DIVs.

Let's break it down:

<div style="border: solid 1px navy; float: left;">

This is relying on default behavior for everything except the border and, by floating it, you are telling the box to pin itself to the left margin (of it's parent, which is assumed to be the body here) regardless of what else belongs there. The default width of the DIV is 100% of the parent object's width (still the body tag). The default position is to be the next block element in the flow - since there aren't any other block elements, it vertically aligns with the top margin.

Then you asked another DIV to do this:

<div style="background-color: blue; float:left;">

Which is essentially the same thing. Here, you haven't given either DIV a new width or any additional instruction about where in the layout they should now go, so it pins itself to the left margin and it's top margin finds the nearest block element to pin to (still the body).

To get these to line up side by side, do the following:

  <style type="text/css">
    .leftBox, .rightBox
    {
       width: 48%; /*leave some room for varying browser definitions */
       border: 1px solid navy;
       float: left;
       display: inline; /* follow the semantic flow of the page and don't break the line */
       clear: left; /* don't allow any other elements between you and the left margin */
     }

    .rightBox
    {
       border: none;
       background-color: blue;
       clear: right;
    }
</style>
<div class="leftBox">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div class="rightBox">
    <p>
        some other text</p>
</div>