Possible to fill remainder of containing div with inner div?

Ok, I'm rather new to CSS and there is one thing I have always struggled with. If you have a containing div and two divs inside, is there a way to make one of the divs extend to fill the remainder of the space in the containing block. I have had times when I've wanted to do this both width-wise and height-wise.

A width example would be if you had a containing block with a width of 500px and two divs floated next to each other. The first div is 100px wide. Is there a way to have CSS automatically set the other div to 400px without manually setting it?

A height example would be if you have four divs in a containing div, stacked in two columns. The content in the left column is longer than the content in the right column. Now, is there a way to stretch the bottom div in the right column to fill the space down to the left column?

Give the first one float:left and the second one margin-left:100px


Since IE5-7 don't support display:table-cell, I'd probably use faux columns for that.

Faux Columns
Creating Liquid Faux Columns
Faux Columns for Liquid Layouts

Thanks so much for the reply! The width thing works great, but I still have a problem with the height thing. How do you make the containing box as tall as the tallest div inside of it in firefox? From my experiments, the inner div just flows below the containing div in firefox, therefore, if my column doesn't extend all the way to the bottom of the page, but just to the end of the containing div, the faux columns doesn't seem to work because the tallest inner div could actually extend past the bottom of the containing div in firefox.

Is there a solution to this?

Thanks again!

You're welcome

I suggest you read up on clearing and containing floats. Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach is best.

Make Your Site BulletProof With Floats is also worth reading.

oh, and one more problem I just realized I had. What if the shorter of the two columns has a border around it? (such as in my case). Man, they really could fix a lot in CSS!

There are certain tricks that are possible (but are a bit complicated) but you might just want to add a few more <div>s instead.

Yeah, unfortunately, CSS2.x can't handle with ease every situation that comes up these days. CSS3 shows more promise, but much of it is still in development.

You can extend columns with JavaScript if you're really keen.

See the Nifty Cube site, which has a file for extending columns AND rounding corners:

www. html. it/articoli/niftycube/index.html [get rid of the spaces]