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

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

i have classical layout accomplish quite often, , i'm improvising on how can it. separated 3 divs on image (red lines). issue right bottom one: if prepare size of left div, set top div float:right. still have cheat problematic div , play negative margins.

for example, quite easy since 2 divs (left , top) have fixed sizes, i'd have pattern responsive flexible layouts.

i searched web, seams each person has own solution, i'm not finding clear clean tasty solution.

any ideas?

the expected behavior :

no fixed sizes, actually, no sizing @ (let elements take place need) if there space left on right, don't go new line. if there no more space, jump new line go left (as expected display:inline-block)

here jsfiddle sample:

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

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

i know there js grids to http://gridster.net/

but don't want drag , drop, simple adaptable layout

a quick way utilize column layout.

you set both sections in 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 2 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; }

html css