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](https://i.stack.imgur.com/5Y4hZ.gif)

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](https://i.stack.imgur.com/DOKxx.gif)

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](https://i.stack.imgur.com/WbXhZ.gif)

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

![enter image description here](https://i.stack.imgur.com/RUlF7.gif)

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.