CSS set width to fill % of remaining area

Question

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

Answer 1

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 =)

Answer 2

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%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

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