#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    215
    Rep Power
    6

    Exclamation CSS expand div height dynamically


    Hello, I would like to implement a div, which would have its height expand for e.g. from 50px to 150px if it is showing 3 levels of menu items, with 50px when only 1 level of menu items is shown.

    my html is like:

    <div id="container">
    <div id="menu-block">Menus</div>
    <div id="content-block">Text</div>
    </div>
    How can I make the menu-block get this feature, so that it gets the height of 50px if only one menu level is shown, and 150px if all 3 levels are shown?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    If you can't simply set a min-height of 50px on the container and set a min-height on the send level menu as well, then manual/server-side class switching or JavaScript are the only two options right now. (Once browsers support CSS4 Selectors, it may be possible to do with CSS alone but not at this time.)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo