Parent div not following size change when child:hover

Okey so the problem is that the #page wont follow the size change, i want the #page to be 100% height when i hover #text3


Just change height:100% to min-height:100% on #page. That way it's not restricted and can grow when needed, but will not be less than 100%.


add this to your javascript:

  mouseover: function(){ 
    var windowHeight = window.getSize().y;
    var text3Height = $('text3').getPosition().y;
    var t3fHeight = $('t3f').getSize().y;

    // padding-top + padding-bottom + border-top + border-bottom
    var paddingHeight = 42; 

      'height':windowHeight - text3Height - t3fHeight - paddingHeight + 'px',
  mouseleave: function(){
      'height':'75px', // initial value

Since you have specified a fixed height it cannot extend..

Use min-height instead

min-height: 100%;

Need Your Help