CODEWITHSUNDEEP
css
4thSpace
4thSpace

Reputation: 44332

Aligning two DIVs horizontally

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/

Upvotes: 0

Views: 27

Answers (1)

Kevin Ji
Kevin Ji

Reputation: 10499

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.

Upvotes: 1

Related Questions