Episodex Episodex - 2 months ago 11
CSS Question

Two divs floating right one above another

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...

Answer

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.

Comments