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 sit

Answer 1

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

Answer 2

You need to create an algorithm using jQuery or JS which checks for the remaining space and sets the width of the "remainder" element dynamically, per a responsive build. If the build is not responsive, you can test and set the element width by doing simple mathematical calculations.

We have experienced similar issues whilst building a liquid-responsive-grid based media system.

Answer 3

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 4

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.