CSS set width to fill % of remaining area

Sorry for the slightly rubbish title. I could not think how to describe this one better.

I am trying to implement the Google Friend Connect members gadget on my site, (just got into the scheme and want to put it in without a major redesign, at least for testing sake).

My problem is as follows:

I have a container div that has a width of 90% of the main page (body). Inside this I am floating a div to the right and setting its width to 300px and putting the google gadget inside it. What I would like is to be able to have a div fill 95% of the space remaining to the left of the google gadget div.

I don't know if it is possible to be able to mix px and % with divs and widths.

I hope this makes sense.

Thanks

It is. You're looking for a semi-fluid layout. The quest was was originally the holy grail of CSS implementation... But as you can see from that link (they're doing 3 columns, 2 fixed but it's easy to alter), it's a problem long solved =)

I did a quick experiment as well after looking at a number of potential solutions all over the place. What I was trying to do was to have a mix of fluid and fixed rows and columns.

This is what I ended up with:

http://jsbin.com/hapelawake

If you prefer to avoid floats and clearfixes, use flex layout.

.main { display: flex; width: 90%; } .col1 { flex-grow: 1; } .col2 { width: 300px; margin-left: 5%; }

Note: Add flex vendor prefixes if required by your supported browsers.