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

    Join Date
    Jan 2003
    Location
    Dallas, TX
    Posts
    135
    Rep Power
    12

    Question CSS: How to Auto Expand


    I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page here:

    http://www.stringersites.com/csstest/index.htm

    Users of Dreamweaver will recognize this as being based on the HaloNavLeft template.

    As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained.

    My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div.

    My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1.

    The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above.

    Thanks in advance for the help.

    -Steve Stringer


    Code:
    #pagecell1{
     position:absolute;
     top: 112px;
     left: 2%;
     right: 2%;
     width:95.6%;
     background-color: #ffffff;
    }
     
    #mainMenu {
     background-color: #EEE;
     border: 1px solid #CCC;
     color: #000;
     width: 350px;
     position: absolute;
     margin-left: 10px;
     margin-top: 20px;
    }
    
    #pageNav{
     float: left;
     width:178px;
     padding: 0px;
     background-color: #F5f7f7;
     border-right: 1px solid #cccccc;
     border-bottom: 1px solid #cccccc;
     font: small Verdana,sans-serif;
    }
    
    .relatedLinks{
     margin: 0px;
     padding: 0px 0px 10px 10px;
     border-bottom: 1px solid #cccccc;
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Location
    Dallas, TX
    Posts
    135
    Rep Power
    12
    Hitting myself in the forehead, by changing the positioning of the mainMenu id from absolute to relative fixed the problem of auto expanding the main div, pageCell. However, there's a fun new side effect of this single change in that the icons that appear next to the menu items now freak out in IE (but not Netscape). Can anyone venture a guess as to what might be causing this?

    You can see the new error here:

    http://www.stringersites.com/csstest/index2.htm

    If you don't see the icons at first (sometimes they show up, sometimes they don't), roll your mouse over them. Another clue is that the icon next to the first item *never* has its icon show up.

    Many thanks,
    Steve

IMN logo majestic logo threadwatch logo seochat tools logo