CSS "conditional" positioning of block

Hi. I have a DIV block that sits below an expandable navigation menu. What I’d like to do, in effect, is absolutely position the block so it is aligned with another element on the page, but I need it to move down if the menu above it is expanded below the top edge of the DIV. In other words, I can’t absolutely position the DIV (I don’t think), because the menu would just overlap it, which I can’t have. But I also don’t want the DIV to move up and down every time the menu is collapsed and expanded (so I can’t just set a top margin, for example)… I ONLY want it to move down if it HAS to to avoid being overlapped. Make sense? Is this possible in CSS? I don’t want to get fancy with Javascript on this if I can avoid it.

Thanks for any help!

Actually, on further reflection, I should just be able to wrap the expandable menu in a div and give it an appropriate minimum height, shouldn’t I? I’ll try that, but let me know if you have a better solution. Thanks.

Hi, you could give that expandable menu a MAX height (not min) and then it would only go so high, then the div below it could have a margin-top:(whatever that max height is) and then it would ensure to never overlap the menu.

JS could be used to find the overall height of the expandable menu, and give that value as a margin-top for the div underneath…it would ensure a better experience (though a small one) to those with JS disabled, and to those without JS, it would still not be broken :slight_smile:

IE6 doesn’t support max-height though