HTML and CSS: 2 DIVS on left, 1 independent DIV on right

Question

I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want: This is the HTML code: ```

Div1

Div3

Div2

``` This is the CSS I have right now: ``` div.div1 { float: left; height: 400px; margin-right: 10px; width: 200px; } div.div3 { height: 425px; overflow: hidden; } div.div2 { clear: left; float: left; height: 15px; margin-top: 10px; } ``` The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:

Accepted Answer

now you can use the right content with overflow:hidden and not conflicting with the left divs.

Check this: http://jsfiddle.net/6UyTr/1/

```
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
```

HTML and CSS: 2 DIVS on left, 1 independent DIV on right

Solution

Problem