How to maximize a floating div width when one div is removed or hidden?

Question

I have two div columns sidebar(left) and page-content(right). I toggle removing and adding 'sidebar' using jquery but unable to maximize '#page-content' to take up the empty space when sidebar is removed.I tried removing 'margin-left:250px;' but the #page-content is going to the bottom. In short i want

Toggle before

| sidebar | page-content |

Toggle after

| page-content                |

but it happens like

| sidebar |
| page-content                |

Please help. Here is the css and jquery used. Thanx

css

#sidebar {
    float:left;
    width:185px;
    color:#333;
    padding:25px 25px;
}

#page-content {
    margin-left:250px;
    padding:25px 35px 25px 25px;
    color:#333;
}

jQuery

$(document).ready(function() {
$('a#side-toggle').click(function() {
  $('#sidebar').toggle(400);

 return false;
  });
});

Answer 1

#sidebar {
    position:absolute;
    left:0;
    top:0;
    width:185px;
    color:#333;
    padding:25px 25px;
}

#page-content {
    margin-left:250px;
    padding:25px 35px 25px 25px;
    color:#333;
}

Answer 2

Well, it should work actually.

Try to add a callback function to .toggle() where you animate/remove the margin from your content, like:

$(document).ready(function() {
  $('a#side-toggle').click(function() {
    $('#sidebar').toggle(400, function(){
        $('.page-content').animate({marginLeft: '0'}, 1000);
    });

    return false;
 });
});

working example: http://jsbin.com/eqiyu/edit

updated version from Reigel: [jsbin.com/eqiyu/2][2]

[2]: http:// jsbin.com/eqiyu/2

Answer 3

#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    /**/
}

#page-content {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 250px;
    /**/
}

Assuming the left margin on #page-content is so it doesn't overlap #sidebar, after you run $("sidebar").toggle(), you need to set #page-content's margin to either 0 or 250px depending on the toggle's state.

$(document).ready(function() {
    $("a#side-toggle").click(function() {
        $("#sidebar").toggle(400, function() {
            var m = ($("#page-content").css("margin-left") == 250 ? 0 : 250) + "px";
            $("#page-content").animate({ marginLeft : m }, 400);
        });
    });
});