CODEWITHSUNDEEP
csscss-floatexpandable
brpaz
brpaz

Reputation: 3658

CSS - auto width floated element (expandable float)

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.

Upvotes: 13

Views: 22933

Answers (3)

Simon E.
Simon E.

Reputation: 58460

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/

Upvotes: 40

FARHAD AFSAR
FARHAD AFSAR

Reputation: 438

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

Upvotes: 1

SimonDowdles
SimonDowdles

Reputation: 2046

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

Upvotes: -3

Related Questions