Как сделать так, чтобы 2 элемента HTML-блока (с различной шириной) были «встроенными», охватывая весь родительский элемент?

Question

как мне выровнять 2 элемента блока («блок», потому что я хочу применить фоновое изображение к одному из них) (один слева, один справа), где:

• ширина левого элемента определяется текстовой строкой, которую он содержит (может варьироваться ...)
• ширина правого элемента занимает остальную часть общей ширины
• общаяширина фиксирована (задается некоторым родительским элементом)

Примерно так:

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

Большое спасибо за любые кросс-браузерные решения для этого!Том

Answer 1

Используйте float:left в левом элементе, чтобы он занимал только размер его содержимого. Используйте overflow:hidden в правом элементе, который будет автоматически использовать оставшуюся часть пространства, поскольку по умолчанию для свойства width элемента блока является auto.

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