Question

I need to position two boxes side-by-side within a variable width container. One box has a width defined, the other needs to fill the rest of the space. Also, the boxes need to be vertically aligned: bottom.

CSS
==============
body { background-color: papayawhip; }
.container {
    background-color: white;
    margin: 10px;
    padding: 10px;
}
.box-fixed {
    background-color: lightgray;
    display: inline-block;
    width: 200px;
}
.box-flexible {
    background-color: lightcoral;
    display: inline-block;
    vertical-align: bottom;
    width: 200px; /* <-- Don't want this! */
}

HTML
==============
<div class="container">
  <div class="box-fixed">Lorem ipsum dolor sit amet</div>
  <div class="box-flexible">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
</div>

I could use floats and overflow:hidden, but then I lose my vertical align bottom. And tables would be bad.

Answer 1

I managed it using jquery: http://jsfiddle.net/uvvdN/1/

It’s not perfect, I had to add the + 4 to _fixedWidth purely because of time but I hope this is the sort of thing you are after.