84

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

Jon
  • 15,110
  • 28
  • 92
  • 132

3 Answers3

71

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

Oli
  • 235,628
  • 64
  • 220
  • 299
  • Looks perfect. Thank you. I will have a fiddle with this over the weekend. – Jon Dec 05 '08 at 09:55
  • 44
    It is articles like this which reaffirm my fear that CSS is far, far from a good tool for layout. – s4y Jan 18 '11 at 22:16
  • 11
    @Sidnicious As somebody who does this [converting designs into websites] as my bread-and-butter work, I can tell you it's far better than anything else that has been before or been suggested since. It's not perfect and you need to know how it works... But once you do, it's simple. – Oli Jan 18 '11 at 22:44
  • but if you want to change the width of a column then you have to edit values all over the place. There's an annoying notion of "if it works don't touch it at all costs, and please don't criticise it", but layout could be vastly easier. if you just mix % and px and refer to other values everything would be a lot simpler. – Jonathan. Jan 04 '13 at 22:40
  • 1
    @Jonathan. There's no doubt that this is true - live variables and arthmetic in CSS would make things vastly easier but we don't have that. If you want to break down the plasticity, look at LESS/SASS/etc. They're half the solution. – Oli Jan 04 '13 at 23:24
  • what can i do if the right colum has no fixed width, but should depend on it's content? – wutzebaer Apr 22 '13 at 11:23
  • @Oli: I have used the solution mentioned in the "holy grail" article. But I have bumped into something that seem even better ;) please have a look & let me know your thoughts http://stackoverflow.com/a/22719552/759452 – Adriano Apr 04 '14 at 13:30
  • @Jonathan. That is correct. However, all of these can be automatically generated by a script or template. – Demi Nov 28 '16 at 21:33
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.

Reggie Pinkham
  • 11,985
  • 4
  • 38
  • 36
0

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

Anthony Tambrin
  • 85
  • 1
  • 3