Question

I have a div $("#organizer_listings_container") initially centered using CSS margin: 0 auto; which uses jQuery to increase its width when the user clicks on a button. After resizing, I’m using the following code to center this resized div $("#organizer_listings_container").

Resizing code

// Center content when width changes
if($("#organizer_listings_container").css("position") != 'absolute') {
    $("#organizer_listings_container").css("position","absolute");
    var left = ( $(window).width() - $("#organizer_listings_container").width() ) / 2 + "px";
    $("#organizer_listings_container").css('left', left);       // set initial 'left'
}
left = ( $(window).width() - ( 852 ) ) / 2  + "px";
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left'  

Problem: When I add a new div (make it visible using jQuery show()), it appear above #organizer_listings_container, #organizer_listings_container shifts downwards which is correct. Now when I remove this newly added div, #organizer_listings_container does not shift back up!

I suspect this is due to the absolute positioning required by the jQuery centering code that was used. How can I make the resized div shift back up when the newly added div is removed?

Using jQuery to calculate the height of the newly added div then shifting the resized div up by offsetting the top by the calculated height appears to be messier than I want

Answer 1

You can avoid having to use jquery and add a class to the newly added div and centre it with a top displacement like so:

<div class="container" style="background:blue; width:100%;">
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div>
</div>

Note that the class would contain the inline style, this is just for an example.

The only thing you might need jquery for would be to ensure that the container was 100% the height. But if you’re only going to see the box and you’re only using the container for positioning it centered, then you don’t need this requirement.