Question

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                                |
+--------------------------------------+

Not a big deal with a typical 2 column layout where you set the left column’s margin to equal that of the div on the right. The variable in this particular example, however, is that I won’t know how wide the div on the right will be at any given time (it’s based on a line of text that will vary.

In summary, I need:

• a 2 column layout
• both columns take up the full width
• column on right is as wide as the text it contains
• column on left is as wide as the leftover space

It seems like I would have had to have built this before but I’m stumped.

I’m open to CSS, JS or jQuery solutions.

Actually, I can already see a fairly easy jQuery solution. I can grab the rendered width of the div on the right, then do some math subtracting that width from the width of the parent container and then setting the width of the left column the same. That’ll be my fallback plan if there’s not a clean CSS option.

Answer 1

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

It will work in IE7+ and 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
}

That’s not the typical use of overflow: hidden, read this for details.