html - How to put one div on the left and two divs vertically on its right

Question

I have a very classical layout I achieve quite often, and I'm always improvising on how I can do it. I separated the three divs on the picture (red lines). My issue is always with the right bottom one: even if I fix the size of the left Div, I put the top div as float:right. I still have to cheat for the problematic div and play with negative margins.

For this example, it is quite easy since the two divs (left and top) have fixed sizes, but I'd like to have a pattern for responsive flexible layouts.

I already searched the web, it seams each person has his own solution, but I'm not finding any clear clean tasty solution.

any ideas?

The expected behavior is :

1. no fixed sizes, actually, no sizing at all (let the elements take the place they need)
2. if there is space left on the right, don't go to a new line.
3. if there is no more space, jump to a new line but go completely to the left (as expected with display:inline-block)

Here is a jsfiddle sample:

even if there is plenty of room (in width) for the div with id='2', it jumps to a new line (because display:inline-block tries to append that div to the right of id='2' and when it doesn't find, it goes to a new line instead of going to the right of id='1')

http://jsfiddle.net/zhamdi/zu5sU/6/

I know there are js grids to to do that like http://gridster.net/

But I don't want something to drag and drop, just a simple adaptable layout

Answer 1

A quick way to do that is to use a column layout.

You would put both sections in their own containing divs:

JSFiddle Example

HTML

<div class="container">
    <div class="column">
        <div class="content one">
        </div>
    </div>
    <div class="column">
        <div class="content two">
        </div>
        <div class="content two alt">
        </div>
    </div>
</div>

CSS

.column{
    float: left;
}
.content{
    width: 100px;
}
.content.one{
    height: 200px;
    background: red;
}
.content.two{
    height: 100px;
    background:blue;
}
.content.two.alt{
    background:green;
}