Как сделать блок, занимающий оставшуюся ширину родителя

[Удален]
6180

Доброго времени, господа.

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

Есть родитель с неизвестной шириной. В него нужно вписать три блока в строку, два блока имеют известную фиксированную ширину, третий — должен занимать всю ширину "оставшуюся" в родителе, но, поскольку ширина родительского контейнера неизвестна, то и ширина третьего блока не может быть определена ни в абсолютных, ни в относительных величинах.

Условия:

третий блок должен вписываться в имеющуюся ширину родителя, а не растягивать его принудительно;

нельзя использовать JS;

результат должен быть кроссбраузерным (включая, будь он проклят, IE6);

желательно минимум кода.

Как решить задачу?

Вот что имею в данный момент:

<div>
<div style="background: red; width: 100px; float:left;">1</div>
<div style="background: blue; width: 100px; float: left;">2</div>
<div style="background: green; width: 100%; float: left;">3</div>
</div>

При таком способе третий блок уезжает вниз, во "вторую строку".

Dreammaker
На сайте с 20.04.2006
Offline
569
#1

NerZool, поместите блоки 1 и 2 вовнутрь блока 3.

zhitov
На сайте с 30.01.2005
Offline
219
#2
<div style="background: black; width: 500px;height:40px;">
<div style="background: red; width: 100px; float:left;">1</div>
<div style="background: blue; width: 100px; float: left;">2</div>
<div style="background: green; width: auto;">3</div>
</div>

Так можно попробовать...

Строительные калькуляторы ( https://www.zhitov.com/ )
flenj
На сайте с 21.07.2010
Offline
59
#3
Порфолиё /ru/forum/526650 (/ru/forum/526650)
dkameleon
На сайте с 09.12.2005
Offline
386
#4
NerZool:

<div style="background: green; width: 100%; float: left;">3</div>

тут не нужно задавать ширину, как раз займет оставшееся место.

Дизайн интерьера (http://balabukha.com/)
[Удален]
#5
NerZool, поместите блоки 1 и 2 вовнутрь блока 3.

Спасибо большое. На текущем примере сработало. Надеюсь, теперь смогу разобраться и с реальной задачей ))

В моей "головоломке" нет доступа к родительскому контейнеру, а он прописывается без id и класса, т.е. overflow к нему не припишешь. Но тоже спасибо, в будущем пригодится.

Zhitov, dkameleon, пробовал уже так, господа. Не получается.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий