Question

when my slideToggle div is expanded, the content overlays the div below it (.fragHeader) instead of pushing it down. I added a huge 200px bottom margin (for fun) to the expanding div (.fragListMoreText) and .fragHeader remained in position, while the div below it (.fragNav) was moved appropriately. Here’s a link to the page in question (I’ve eliminated the 200px margin):

http://mentalwarddesign.net/Andrea/Fragrances/baked.html

The jQuery is working fine so I won’t include that code, but here’s the pertinent CSS:

.fragListShowHide {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 18px;
    font-weight: normal;
    color: #009b7b;
    width: 520px;
    height: 72px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.fragListMoreText  {
    width: 520px;
    display: none;
    margin-left: -10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.changeTextButtonFrag  {
    display: block;
    cursor: pointer;
    float: right;
    margin-right: -10px;
}

.fragHeader {
    background-color: #FFF;
    width: 528px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 10px;
    margin-top: 30px;
    padding-bottom: 5px;
}
.fragNav {
    height: 116px;
    width: 543px;
    background-image: url(../Fragrances/imgFrag/navFragrance.jpg);
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -o-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    float: left;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

And here is the html for the area affected:

      <div class="fragListShowHide" id="baked">ANGEL FOOD CAKE | APPLE CRISP | APPLE PIE | BAKED BREAD | BANANA CREAM PIE | BANANA NUT BREAD | BLUEBERRY CHEESECAKE | BLUEBERRY MUFFIN | BLUEBERRY PIE | CARROT CAKE | CHERRY COBBLER | CINNAMON BUNS | CINNAMON TOAST | COOKIE | DONUT | FUDGE BROWNIE | GINGERBREAD | GINGERSNAP | GRAHAM CRACKERS | KEY 
      <div class="fragListMoreText">LIME PIE | LEMON MERINGUE | NUT BREAD | NUT CAKE | PEACH COBBLER | PINEAPPLE UPSIDE DOWN CAKE | PLUM PUDDING | PUMPKIN PIE | SEX ON THE BEACH | SNICKER DOODLE | STRAWBERRY | CHEESECAKE | SUGAR COOKIE | VANILLA WAFER | WEDDING CAKE
       <!-- end .fragListMoreText --></div>
      <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButtonFrag" alt="textButton">
      <!-- end .fragListShowHide --></div>
   <div class="fragHeader">
        <h2>OUR FRAGRANCE CATEGORIES</h2>
        <p>Andrea Aromatics' custom fragrance categories are designed around familiar olfactory themes. With hundreds of individual fragrances overall, we cover practically every scent under the sun.</p>
      <!-- end .fragHeader --></div>
    <div class="fragNav" style="left: 101px; top: 265px;">
      <div class="fragNavRow1"><ul class="frag">
      <li class="chosenSub"><a href="../Fragrances/baked.html">Baked Goods</a></li>
      <li><a href="../Fragrances/floral.html">Florals</a></li>
      <li><a href="../Fragrances/nuts.html">Nuts</a></li>
      </ul>
      <!-- end .fragNavRow1 --></div>
      <div class="fragNavRow2"><ul class="frag">
      <li><a href="../Fragrances/beverage.html">Beverage</a></li>
      <li><a href="../Fragrances/fruit.html">Fruits</a></li>
      <li><a href="../Fragrances/outdoor.html">Outdoor</a></li>
      </ul>
      <!-- end .fragNavRow2 --></div>
      <div class="fragNavRow3"><ul class="frag">
      <li><a href="../Fragrances/designer.html">Designer</a></li>
      <li><a href="../Fragrances/holiday.html">Holiday</a></li>
      <li><a href="../Fragrances/spiceherb.html">Spice & Herb</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <div class="fragNavRow4"><ul class="frag">
      <li><a href="../Fragrances/exotic.html">Exotic</a></li>
      <li><a href="../Fragrances/novelty.html">Novelty</a></li>
      <li><a href="../Fragrances/trees.html">Trees</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <!-- end .fragNav --></div>

Thanks to any and all for your help!

Answer 1

You’ve hard coded the parent element’s height (fragListShowHide), so that even when the nested element is shown, the height of the parent container div is still 72, meaning nothing will move to accommodate the larger content.

Either remove the absolute height from fragListShowHide or move fragListMoreText outside.

You can see what’s happening clearly if you use firebug, and look at the div sizes.