Confusion about negative margin of float none and float left elements

Question

I feel like CSS is much harder and confusing than C++ therefore I have few questions.

Consider following html body

<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>

And CSS

#mydiv1 {
    float: left;
    background-color: red;
    margin-right: -30px;
}

#mydiv2 {
    float: left;
    background-color: blue;
}

which looks like this (in my latest Chrome)

enter image description here

which makes sense to me because second div is floating and it floats over first div.

On the other hand if I remove float property from mydiv2 only content moves but background box stays in the same place.

enter image description here

1) Could you please explain why ?

Now I'll remove margin and float, and add width to both divs making having CSS

#mydiv1 {
    background-color: red;
    width: 220px;
}

#mydiv2 {
    background-color: blue;
    width: 240px;
}

It will expectantly look like this

enter image description here

But if I add float: left to #mydiv1 it suddenly looks like this

enter image description here

2) Why did second div become twice as high ? I checked it by setting z-index of first div to -1.

PS. I've done tutorials on CodeAcademy and read float/margin-related articles on smashingmagazine.com. Sadly it didn't made everything crystal clear. If you guys can suggest online resources or book that would have explained these questions to me I'll appreciate it a lot.

score 2 · Accepted Answer · answered Mar 14 '13 at 07:02

<div> is a block-level element so it naturally fills the width of the container it's in. It makes its neighboring elements go above/below it, but not beside it.

Now, when you apply float to a block-level element, it no longer fills the width of the container, its width will be that of its contents. It also loses the ability to force its neighbors to go above/below it.

Note:The tricky bit is that the container holding the floated elements will not have a proper height because the floated elements are no longer part of the regular flow of content. (Here's how to get around it: http://www.quirksmode.org/css/clearing.html)

Regarding the last part of your question, if a floated element, eg. #mydiv1, is beside a block-level, eg. #mydiv2, then the block-level element wraps or flows around the floated element. It's one of the ways people can get text to wrap around an image in a news article.

Hmmm, so in theory presence or lack of `float` should not change width of div ? Could you please take a look at [**this**](http://jsfiddle.net/sthvQ/) ? If I remove `float` blue div significantly changes its width. Could you please explain why ? — expert, Mar 14 '13 at 07:19
@ruslan When you remove `float` from the blue div, it still has `width: 240px` and the reason you think it changed width is because the red box is covering it (because the red box is *floated*). Here look at **[this](http://jsfiddle.net/cuKJ7/)**, I set a height on the blue box so you can see it is behind the red one, the width of the blue box is still `240px`. — Amy, Mar 14 '13 at 07:25

score 1 · Answer 2 · answered Mar 14 '13 at 07:01

When you remove the float from div2 it goes behind the floated div1, because floated elements does not take any height from it's content. You can say it's going out of the vertical flow of elements. However, it still take horizontal space from content. So the result is as expected here, once you "know the rules". This should also explain the double height in your other example.

Here is a great article from css-tricks.com

I hope that helps!

score 1 · Answer 3 · answered Mar 14 '13 at 07:05

1

If we don't give either float or width to any block level element like div then it occupies the entire width of the container.

Instead of float you can give some width and display: inline-block. This display property will display content inline and behaves like a block level element.

answered Mar 14 '13 at 07:05

web2008

914
4
11

Might add that `display: inline-block` will not look right on IE7. http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block – Amy Mar 14 '13 at 07:35

Confusion about negative margin of float none and float left elements

3 Answers3