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;
  });
});