12

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.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
brpaz
  • 3,618
  • 9
  • 48
  • 75
  • can you give us a sample of code, how you hide/collapse the column? – Sotiris Aug 11 '10 at 10:45
  • 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. – David Thomas Aug 11 '10 at 11:52
  • 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] – Anthony Walsh Aug 11 '10 at 12:19
  • @brpaz - any chance you could change the accepted answer to this question? (You're the only one who can do so.) – Simon East Mar 19 '15 at 10:04

3 Answers3

39

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/

Simon East
  • 55,742
  • 17
  • 139
  • 133
  • 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. – Joseph Daigle Aug 23 '12 at 13:59
  • 1
    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? – Simon East Aug 28 '12 at 04:03
  • 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. – Joseph Daigle Aug 28 '12 at 11:48
  • I can't wrap my brain around this! Why does this work? – Protector one Jan 14 '19 at 10:51
  • 1
    @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. – Simon East Jan 15 '19 at 23:18
2

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

FARHAD AFSAR
  • 440
  • 5
  • 10
-3

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 */
}
SimonDowdles
  • 2,026
  • 4
  • 24
  • 36