side by side using float <div>

Question

I seem to have problem with understanding float property

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px"> hello  </div>

i am floating the first div to the left and the 2nd one should be next to it but it just goes on top of it, and BTW it works if i add to the 2nd div : overflow:scroll

Answer 1

By adding float: left; to the second div, we can fix this. You could also use float: right; on the second div.

http://jsfiddle.net/x3Lgu/

You need to float both of the div's. Floating only one div creates space that other elements can wrap up and around the one that is floated. It looks weird in your case as you have limited the width to be very narrow. If the width's were larger you would see what I mean more clearly. You see this commonly with pages that have text wrapping around an image. For example....

http://jsfiddle.net/ErjcN/

Notice how the text wraps around the image. This is exactly whats happening to your document.

Answer 2

You will have to float the other div also to the left. Float works with two divs if you float both. Right now the div without float is just the same.

So:

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px; float: left;"> hello  </div>

It might seem strange, but it's just how css works.

Answer 3

add a float:left; to your 2nd div as well and it should put them next to each other

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px;float:left"> hello  </div>

Answer 4

You have to give the float: left property to both of the div's otherwise it will not work.

What you also can do is apply display: inline-block , it floats the 2 div s next to each other aswell.

HTML

<div class='first'>First div</div>
<div>Second div</div>

CSS

div {
    float: left;
    width: 50px;
    background-color: blue;
}

.first {
    width: 40px;
    background-color: green;
}

Answer 5

How this works...

Consider the following HTML snippets:

<h2>Default Behaviour</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px;">a a a a hello</div>

<br><br>
<h2>New Block Formatting Context</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px; overflow: auto;">a a a a hello</div>

In the first case, I added some single letter words to demonstrate the behavior. CSS places the non-floated element to the top and left of the containing block since the previous element is floated hence out of the regular content flow.

CSS then places the floated element to the top left (as high as it can go) and starts wrapping the in-flow content around it. Since the in-flow div has a fixed width, the content is constrained to the right as shown by the single letters wrapping around the floated element.

In the second case, I establish a new block formatting context by assigning overflow: auto ( scroll would also work, and float ). In this case, the left edge of the in-flow element is placed to the right of the floated element, so there is no text wrapping around the floated element.

See demo at: http://jsfiddle.net/audetwebdesign/Rd3Fp/

Results look like: