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

    Join Date
    Sep 2009
    Rep Power

    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>
    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
    USA (verifiably)
    Rep Power
    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.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    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