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

Question

Please note that my question is not how to fill the remaining space with <div>.

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

.column
{
  display:inline-block;
}

Now everything looks good in FF. While dragging the "placeholder" that jQuery sortable introduces is empty <div>with

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

"inline-block" will cause this "placeholder" to cover the entire amount [ww]pxthat is being dragged <div>.

(I have the option "forcePlaceholderSize = true")

However, this breaks down in IE7 because it only knows the display: inline. But if I switch to using "display:inline"FF, then the placeholder will no longer take [ ww]px.

I have tried numerous workarounds, including:

• an indication of my own placeholder style.
• css switching based on jQuery.browser.msie.
• dynamic expression css.

none of them work satisfactorily for one reason or another.

It seems to me that only if I can force the size of an empty div, can I solve this problem accurately. (Of course, the fastest solution is always for @ # $% IE, so that the standards are consistent with the beginning ...)

Good workarounds are welcome.

Please, help!

Answer 1

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

CSS, min-width max-height, IE6 , .

Answer 2

-   . ?

Answer 3

Xerion,

You can explicitly force the placeholder sizes in IE7 +. Try using the code below:

$('.wpzone').sortable({
  sort: function (e, ui) { 
    $(".ui-state-highlight").css({"width":"100%", "height" : ui.item.height()});
  }
});

my css:

.ui-state-highlight { width: 100%; height:auto; clear:left; border: 1px dashed #333; background-color: #d3dfd1; z-index:1; }

I don't think CSS affects it, though.

Answer 4

CSS can be used to create an empty div.

<style>
.empty {  
border-left:solid 10px white; 
border-right:solid 10px white; 
} 
</style>

The above style, if applied to an empty div, will create a 20px wide space.