SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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-topwhatever 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

    IE6 doesn't support max-height though
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •