Is there a 0-width way to prevent floated divs from collapsing

Question

First, this issue is not about block elements collapsing when their children are floated. In fact the issue has nothing to do with clearing at all.

The issue is this. Suppose I have a series of floated divs like:

<div class="column">Column 1</div>
<div class="column"></div>
<div class="column">Column 3</div>

With css:

div.column { float: left; width: 200px; }

The middle column will collapse in recent versions of Firefox and Safari, although apparently not IE7. What I want is the IE7 behavior.

I realize I can add an   and it will hold the div open, but that doesn't work for me in this case because I also have have a declaration like this:

div.column input { width: 100% }

I have a series of columns layed in a table-like format, with certain conditions causing the input fields to disappear. The problem is when the input disappears the field collapses. If I add an   it causes the div to wrap. Just to head off the initial questions:

• Why don't I use a table instead? Because I'm using Scriptaculous Sortable to drag and drop rows, which doesn't work with tables
• Why don't I use a shorter pixel width to leave room for an  ? Because width: 100% is more accurate across browsers.
• Why don't I add a   when I hide the input I may end up resorting to this, but it would be kind of ugly in the JS, so I'm hoping for a better way.

Does anyone have any clever hacks here? Since both Safari and Firefox behave this way I assume this is officially sanctioned behavior. Where is this discussed in the W3C specs?

Answer 1

Eh? Shouldn't you just give it a random height? Can you show a demo?