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

If you want the blue box to be beside the list, you need to float it as well:

<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; float:left;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 2

When the first div is floated to the left, the second div is positioned as if it does not exist (although any text within the second div will flow around the floated div). See the CSS2 specification for more information about the behaviour of floated elements.

To get the second div to float next to the first div you can add float: left to the second div.

Alternatively, if the width of the first div is known, you can add left margin to the second div.

Answer 3

Add overflow: auto; zoom: 1.0; to the 2nd div

This is different (and in some sense closer to what was asked) than putting float: left; on the 2nd div because it preserves the width of the 2nd div expanding as far as possible to the right without hard-coding width values. zoom: 1.0; is needed to give the element layout in IE.

<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; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 4

You want the second div to float next to the first? Then you add float:left to the second div.

Do not create another div purely for clearing, this is terribly unsemantic.

EDIT: overflow: auto does not work for IE, you need to give the div hasLayour in that case which involves a hack of adding zoom:1.0 or force a fixed dimension you might not be able to do. Don't hack when a valid solution exists. You want it to float, use float.

Answer 5

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>

Answer 6

Thanks for all your help, as is so often the case the solution is most welcome. I had misunderstood the float style.