CSS - auto width floated element (expandable float)

Question

I have two floated collumns side by side. The user can hide/collapse one of that collumns. In that case I want the other collumn to expand to fit the entire container.

Is this possible with CSS?

In resume, it's possible to make a float to expand to the size of it's container? Even if the element is floated, if it has width:auto it should expand. At least that´s way I think it should work.

Answer 1

If your left column has an implicit size, say 250px and your right column is ONLY floated with no set size, then it should fill the container when the left column is collapsed. Code would be as follows:

#leftcol{
width:250px;
float:left;
clear:none;
}

#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}

Answer 2

Nup, I don't think the accepted answer actually works. I was just attempting the same thing, and this is the solution...

.left { 
    float: left;
}
.right {
    overflow: hidden;
    /* don't float this one */
}

Play around with the code here: http://jsfiddle.net/simoneast/qPHgR/2/

Answer 3

set overflow:auto; height:auto; for floatet element :)