Arranging a label and table side-by-side with the label being fixed width, and the table taking up the remaining 100%?

Question

I know there are tons of CSS side-by-side positioning questions, but I have a unique scenario that I haven't seen any answer that works.

I am stuck with the following HTML block, that I cannot change:

<div class="outer">
    <div class="inner">
        <label>...</label>
        <table>...</table>
    </div>
</div>

The "outer" div has a fixed width that can change at runtime. The "inner" div can repeat any number of times, and has a width of 100%.

I need to have each <label> element take up a fixed width of 150px, with the <table> element taking up the rest (ie, 100% of the remaining space).

No matter how I try to float the elements, etc, I can't get it to work correctly. Also, this application will only be used on machines with latest versions of Chrome / Firefox, so IE backwards-compatibility is not an issue.

Thanks!

Answer 1

You could add a padding left to the .inner and then negatively margin the label back into that space.

Like this:

.inner {
  padding-left: 150px;
}

label {
  width: 150px;
  margin-left: -150px;
  float: left;
}

table {
  width: 100%;
  border: 1px solid #000;
}

http://jsbin.com/IdayeTOp/1/edit