Question

Can anyone see what I’ve done wrong here? I want the content to expand and push the footer below it down when it reveals the hidden div. Here an example. Don’t mind the awful colors:
http://www.kerrydean.ca/MATHESON/home5.html

CSS

.valveMenuWraps {
    background-color: #990;
    margin: 9px;
    float: left;
    height: 40px;
    width: 170px;
    overflow: hidden;
    padding: 5px;
    position: relative;
}
#valveMenu {
    background-color: #FFF;
    position: relative;
    height: 75px;
    width: 795px;
    left: 4px;
}

HTML

<div id="content">
    <div id="picMenu">
    <div id="first" class="pics"></div>
    <div id="second" class="pics"></div>
    <div id="third" class="pics"></div>
    <div id="fourth" class="pics" ></div>
    </div><!--end of pic menu-->
    <div id="valveMenu">
    <div id="controlWrap" class="valveMenuWraps">
    <div id="control"  style="position:relative">
    <p>
    vee ball<br />
    butterfly control<br />
    rotary eccentric plug<br />
    globe
    </p>
    </div></div>
    <div id="safteyWrap" class="valveMenuWraps">
    <div id="saftey" style="position:relative"></div></div>
    <div id="automatedWrap" class="valveMenuWraps">
    <div id="automated"></div></div>
    <div id="manualWrap" class="valveMenuWraps">
    <div id="manual">
    <p>soft seated ball valves<br />
        high performance butterfly valves<br />
        resilinet seated butterfly valves<br />
        metal seated ball valve<br />
        triple offset butterfly valves<br />
        multi-port ball valves<br />
        gate, globe, check valves<br />
        specialty check valves<br />
        knife gate valves<br />
        diaphram valves<br />
        pinch valves</p>
    </div></div>
    </div><!--end of valveMenu-->
    <div id="footer"><a href="test.html">HOME</a> | <a href="test.html">CONTACT US</a></div>
</div><!--end of content-->

and the jQuery

$(document).ready(function(){

    //When mouse rolls over
    $("#controlWrap").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#controlWrap").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

thanks! this site is awesome!

Answer 1

I added a float:left to both #content and #footer and it works fine.