I am trying to create a simple 2 block column layout:
<div id="wrap">
<div class="column_1"></div>
<div class="column_2"></div>
</div>
My goal is to have column_2 with a fixed width of 60px, both columns floating to the left. The total combined width of the columns should be equal to the wrap's total width (which may vary):
#wrap { width: 100%; }
.column_1, .column_2 { float: left; }
.column_2 { width: 60px; }
Please note that the wrap's width will change as it is nested inside a block with varying sizes.
An example use case could be having a text input in column_1 and a button in column_2. The button would remain a constant size while the input in column_1 adjusts its width accordingly.
Any suggestions on how to achieve this?
Note: I am looking for a CSS solution primarily, but open to jQuery if necessary.