Two dynamic CSS columns?

Question

So, I have three divs:

<div class="takeremaining">
  <div class="centeredcontent">
    This is my centered content
  </div>
</div>
<div class="dynamicallyallocated">
  This is my dynamic content
</div>

I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:

.takeremaining {
  display: inline-block;
  width: 100%;
  float: left;
  background-color: #0000ff;
}

.centeredcontent {
  display: table;
  margin: 0 auto;
  background-color: #00ffff;
}

.dynamicallyallocated {
  display: inline-block;
  float: right;
  background-color: #00ff00
}

but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?

Possible duplicate of [Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown](http://stackoverflow.com/questions/33129660/setting-a-length-height-or-width-for-one-element-minus-the-variable-length-of) — Asons, Jan 27 '16 at 19:24

score 0 · Accepted Answer · answered Jan 27 '16 at 19:29

0

Here is a solution for you.

.container {
  display: table;
  width: 100%;
}

.takeremaining {
  display: table-cell;
  width: 100%;
  text-align: center;
  background-color: #0000ff;
}

.centeredcontent {
  display: inline-block;
  background-color: #00ffff;
}

.dynamicallyallocated {
  display: table-cell;
  width: 0;
  background-color: #00ff00;
  white-space: nowrap
}

<div class="container">
  <div class="takeremaining">
    <div class="centeredcontent">
      This is my centered content
    </div>
  </div>
  <div class="dynamicallyallocated">
    This is my dynamic content
  </div>
</div>

answered Jan 27 '16 at 19:29

Asons

84,923
12
110
165

This worked well. Thank you! Another solution by user3790069 shows that less is more. Here's the alternate solution: https://jsfiddle.net/tcv6x13b/1/ – Jonesy Jan 27 '16 at 19:37
@HunterJ. Sometimes it is... :) ... and with my way, you could drop the `container` and use the `body` as `table`, though that is often unwanted – Asons Jan 27 '16 at 19:42

Two dynamic CSS columns?

1 Answers1