Question

In the following code, (see example fiddle), if you mouseover the green, the height of the two red boxes will change, but the height expands down. Is there a way to make the height expand upwards?

css:

.one{
    position: absolute; 
    left: 110px; 
    top: 0px; 
    background: green;
}

.two {
    position: absolute; 
    left: 70px; 
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px;
}

.three {
    position: absolute; 
    left: 200px;
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px;
}

html:

<div class="one">15,000,000</div>
<div class="two">700</div>
<div class="three">800</div>

javascript:

$('.one').mouseover(function(){
   $('.two, .three').css('height','50px');
}).mouseout(function(){
    $('.two, .three').css('height', '25px');
  });

Answer 1

Just alter the top of the boxes as well:

$('.one').mouseover(function(){
   $('.two, .three').css({ height : '50px', top: '15px'});
}).mouseout(function(){
    $('.two, .three').css({ height : '25px', top: '40px'});
  });

http://jsfiddle.net/wyxJ7/12/