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.

Edbert

can you give us a sample of code, how you hide/collapse the column? – Benford

It's unlikely that this is possible in pure CSS (making the columns react to user-events), but certainly it's do-able with js/jQuery. – Phototelegraphy

Have you thought about using a JavaScript library like jQuery? It could change the CSS styling of those columns on the fly without breaking a sweat. [Edit.. noticed other similar comment added after I refreshed page - Ah well, great minds... ;p] – Exogenous

@Edbert - any chance you could change the accepted answer to this question? (You're the only one who can do so.) – Saponaceous

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 */
}

Calculable

I have to vote this down because it doesn't work. See this example: jsfiddle.net/4jtnY/2 – Palaeogene

Answer 2

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

aside { 
    float: left;   /* or could also be float: right */
}
main {
    overflow: hidden;
    /* don't float this one */
}

Just be sure to place the collapsible element first in the HTML. Then the following element will use up the remaining space.

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

Saponaceous

This is a mostly good workaround. But what don't like is how the ".right" container overflows, putting the scroll bars on the container instead of the window. It's unfortunate. – Palaeogene

Sorry Joseph but overflow: hidden should never put scrollbars on the element. And it will auto-expand in both width and height so should display all your content unless it's larger than the column itself (eg. an image or a fixed size element). Are you sure you're not putting extra CSS in than what's here? – Saponaceous

Simon, you're right. If .right or anything inside of .right wants to be at least a certain width, then overflow: hidden can chop off the content if the window is too small. In my testing I added overflow-x: auto; which causes scroll bars to appear in that case. – Palaeogene

I can't wrap my brain around this! Why does this work? – Cyclic

@Protectorone Yeah it’s a bit confusing. Without overflow:hidden the content in .right will wrap around and underneath .left. But overflow:hidden seems to have special properties where it does things like expand a box to contain all floated elements inside it and also adjust the size of a box to account for other floats. I’m not exactly sure why - the technical reasons are probably buried in the CSS spec somewhere, as all modern browsers seem to have this behaviour. – Saponaceous

Answer 3

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

Bugg