Question

I have a layout with two divs inside a container, here’s a JSFiddle of the layout. I want to animate the right column off the display, and have the left column adjust to 100% width to fill the newly created space. This is the jQuery code I have:

if ($('div#right').offset().left > $('#container').width()) {
         // Bring right-column back onto display

          $('div#right').animate({
            left:'0'
          }, 600);

          $('div#left').animate({
            width:'50%'
          }, 200);
        } else {

// Animate column off display.
          $('div#right').animate({
            left:'+50%'
          }, 600);

          $('div#left').animate({
            width:'100%'
          }, 1000);
        } 

container overflow-x is set to hidden. The problem I’m having is that expanding the left column to 100% causes the right column to appear beneath the left column, since it still takes up space within the container, and the left column is gradually moving toward taking up 100% of the container’s width.

Any suggestions about how to achieve this?

Answer 1

 $('#container').click(function(){
    if (parseInt($('div#right').css('right'),10) < 0) {
             // Bring right-column back onto display
              $('div#right').animate({
                  right:'0%'
              }, 1000);

              $('div#left').animate({
                width:'45%'
              }, 600);
            } else {

    // Animate column off display.
              $('div#right').animate({
                  right:'-45%'
              }, 600);

              $('div#left').animate({
                width:'100%'
              }, 1000);
    }

});

This is a better solution. Use absolute positioning instead of floats: jsFiddle: http://jsfiddle.net/YNAJZ/38/