Getting left and right floats to overlap instead of stack

Question

This is easier to show than explain: http://jsfiddle.net/gN4VZ/ Is it possible to have my right-floated content (blue) overlap my left-floated content (red) instead of stack below it when the two combine to exceed the container width?

Accepted Answer

You could use absolute positioning.

Instead of

```
float: right
```

use:

```
position: absolute;
right: 0;
```

and instead of

```
float: left
```

use:

```
position: absolute;
left: 0;
```

Be sure to set `position: relative;` on your parent `div`s so that the absolute positioning is relative to their respective containers instead of the page.

Getting left and right floats to overlap instead of stack

Solution

Problem