Question

The following code will close a widgets on my page based on jQuery sortable portlets.

$(document).on("click", ".widget_minimise_button", function( ){
    $( this ).closest( ".widget" ).find( ".widget_sub_header, .widget_content" ).toggle();
});   

This works as in closing the widgets, but if I close enough widgets so a column becomes empty, the column to the right of an empty column is moved to the left to fill in the empty column space. This should not be happen, and it doesn’t happen in IE7, it works properly in IE7, but not in IE8, Google Chrome, FireFox, and Opera.

Not 100% where the problem is, most likely a CSS problem? I am including a jsFiddle of the full thing:

jsFiddle: http://jsfiddle.net/oshirowanen/89uqU/1/

To close a widget, click a (c) in the header of awidget, not the (c) in the header of the page. Then click close.

Answer 1

If you give your .column something like min-height: 100px; or padding-bottom: 100px; it will solve your problem.