How to force an hidden+empty <div> to take up space?

Question

Note that my question is not about how to fill remaining space with <div>.

Background: I'm trying to use jQuery sortable with a series of horizontally laid out <div>, with class "column"

.column
{
  display:inline-block;
}

Now in FF, everything looks good. During dragging, the "placeholder" which jQuery sortable injects is an empty <div> with

<div class="column ui-sortable-placehold" 
     style="visibility:hidden;height:[hh]px;width[ww]px;"/>

The "inline-block" will cause this "placeholder" to span however many [ww]px the <div> being dragged has.

(I have option "forcePlaceholderSize = true")

However, this breaks down in IE7 as it only knows display:inline. But if I change to use "display:inline" on FF, the placeholder will no longer span [ww]px.

I've tried numerous workarounds, including:

• specifying my own placeholder style.
• switching css based on jQuery.browser.msie.
• dynamic css expression.

none of them works satisfactorily due to one reason or another.

It seems to me like if only I can force a size on empty div, I will be able to solve this problem neatly. (Of course, the neatiest solution is always for the @#$% IE to be standards compliant to begin with...)

Good workarounds welcome.

Please help!

Answer 1

.column {
    /* your stuff here */
    width: 100px;
    height: 200px;
}

You can also play with related CSS properties like min-width and max-height, but there are IE6 limitations with those, I believe.

Answer 2

The classic way to make empty elements to take space is to add   inside them. Would that help in this case?