Floated divs are overlapping?

Question

Currently, one div is floated - my question is why are two divs overlapping even if the dimensions are set in every one of them? How can I fix this? HTML: ```

``` My CSS: ``` .wrapper {border:black solid;width:500px;height:1000px} .block1 {width:300px;height:300px;float:right;border:solid red;} .block2 {width:300px;height:300px;border:solid green;} ``` jsfiddle here - http://jsfiddle.net/FLwUA/1/

Accepted Answer

It's because you are giving them defined widths using pixels - your wrapper width is only `500px`, however you are using `300px` by `300px` divs inside which is equal to `600px` so it'll end up outside the container div. You could use percentages in relation to the parent div like so. Here's a jsFiddle.

```
.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:49%;height:300px;float:right;border:solid red;}
.block2 {width:49%;height:300px;border:solid green;}
```

Alternately, if you want to keep the fixed width and have one over the other if they are too large, you could just use `float` on the second block. Here is the jsFiddle.

```
.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;float:left; border:solid green;}
```

Floated divs are overlapping?

Solution

Problem