CSS Columns: Both Liquid and Flexible in Width

Question

In 2011, I came across a two-column layout. I am ashamed.;)

The challenge is to come up with this:

+--------------------------------------++----------------+ | This is a header with potentially || button div | | || | | long text that will wrap most likely |+----------------+ | | | but can't go under the button to the | | | | right | +--------------------------------------+ 

Doesn’t have much to do with a typical two-column layout, where you set the left margin of the column to the div marker on the right. However, the variable in this particular example is that I will not know how wide the div will be on the right at any given time (it is based on a line of text that will change.

As a result, I need:

• arrangement of two columns
• both columns are full width Column
• on the right is as wide as the text that it contains. Column
• left as wide as the remaining space

It seems I would have to build it earlier, but I'm at a dead end.

I am open to CSS, JS or jQuery solutions.

EDIT:

In fact, I already see a fairly simple jQuery solution. I can capture the rendered width of the div to the right, and then do some mathematical subtraction of that width from the width of the parent container, and then set the width of the left column the same. This will be my backup plan if there is no pure CSS option.

Answer 1

See: http://jsfiddle.net/vpADP/

It will work in IE7 + and in all modern browsers.

HTML:

 <div id="buttonDiv">button div as wide as text</div> <div id="leftDiv"> left div </div> 

CSS

 #leftDiv { overflow: hidden } #buttonDiv { float: right } 

This is not a typical use of overflow: hidden , read this for details .