Aligning two DIVs horizontally

Question

Why does box B surround box A in the code below? Isn't float left on box A supposed to make them align horizontally?

<div style="width:300px">
    <div style="width:45%;margin:5px;float:left;border:1px solid black">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width:45%;margin:5px;border:1px solid red">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>

http://jsfiddle.net/VCr8y/

use float:left; for horizontal alignment – Ashok Shah Jul 21 '14 at 04:21 — Ashok Shah, Jul 21 '14 at 04:21

score 1 · Accepted Answer · edited May 23 '17 at 11:50

By adding float: left to the first div, you are effectively removing it from the page flow, but box B is not removed from the page flow. However, box B cannot have its text running through box A, so it just "surrounds" it, as you see in your JSFiddle. What you should do is float box B as well, and apply a clear afterwards (or another clearfix solution) so that your two divs aren't covered up by divs after it:

<div style="width: 300px;">
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid black;">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid red;">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>
<div style="clear: both;"></div>

Here's a JSFiddle. By the way, using classes would probably be helpful.

Aligning two DIVs horizontally

1 Answers1