I'm trying to put two divs on the right side of parent div one above another. Something like this:
div#top
|-------------------------------------||------------|
|div#parent ||div#menu |
| |---------|||float:right |
| |div#up ||| |
| | ||| |
| |---------|||------------|
| |
| |---------||
| |div#down ||
| | ||
| |---------||
|-------------------------------------|
Any ideas how to do it using css? I can't use tables here because div#up is added in Master page (ASP.NET) and div#down is added in content. Div#parent is liquid with some min-width set and contains content that should not be overlapped by these divs so i think position:absolute is out of question here too.
One more detail: on the left and right of div#parent there ale divs floated left and right with menus. So adding clear:left/right to div#down floated right puts it under one of these menus...
You need to make sure that the parent block (#parent
in your case) becomes the block formatting context of the divs #up
and #down
, so that any clearing only happens inside that block formatting context and ignores the floats outside of it. The easiest way to do this usually is to either let #parent
float, too, or give it an overflow
other than visible
.
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Here some proof, that I got it right this time: http://jsfiddle.net/Pagqx/
Sorry for the confusion.