How to have 2 HTML block elements (with varying widths) "inline", covering the entire with of the parent element?

Question

Hi there,

how can I have 2 block elements ("block" because I want to apply a background image to one of them) aligned (one on the left, one on the right), where:

• the width of the left element is defined by the text line it contains (can vary...)
• the width of the right element takes up the rest of the total width
• the total width is fixed (given by some parent element)

Like so:

<div id="some_parent_element_with_fixed_width">
    <div class="left">Here should be some text of varying length...</div>
    <div class="right">Here should be displayed a x-repeat background image on the entire remaining width...</div>
</div>

Thanks a lot for any cross-browser solutions to this! Tom

Answer 1

Use float:left on the left element, that will make it take up only the size of it's content. Use overflow:hidden on the right element, that will automatically use the rest of the space as the default for the width property of a block element is auto.

.left { float: left; }
.right { overflow: hidden; background: url(someimage.gif) repeat-x; }