CSS - auto width floated element (expandable float)

css css-float expandable
brpaz picture brpaz · Aug 11, 2010 · Viewed 21.5k times · Source

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

Simon East picture Simon East · Apr 26, 2012

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/

Related questions

How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to float 3 divs side by side using CSS?

I know how to make 2 divs float side by side, simply float one to the left and the other to the right. But how to do this with 3 divs or should I just use tables for this purpose?

Read More