Резиновый (liquid, растягивающийся) div - Веб программирование

Начинаю изучать верстку на div-ах. Возникает такая проблема:

Часто требуется выводить некоторые элементы (например div-ы) в одну строку так,
чтобы один из них растягивался до тех пор, пока можно сужать остальные. Точнее говоря,
чтобы все элементы были минимально возможной ширины (ну это просто), а один из них
растянулся на все оставшееся место в элементе-контейнере, в котором все это безобразие находится.
Этот элемент часто бывает самым правым, но может быть и в центре (как сейчас

).
Размер элементов и их количество справа и слева от "резинового" в общем случае не известен.

Эта проблема с горем пополам решалась с помощью таблиц установкой width="100%" у "резиновой" ячейки.

Искал много где, но толкового, универсального решения не нашел. Помогите.
Пока что это все, что напрягает в div-ах по сравнению с таблицами. В остальном глюки примерно одинаковые.

Здравствуйте, KnazDmitriy, Вы писали:

KD>Часто требуется выводить некоторые элементы (например div-ы) в одну строку так,
KD>чтобы один из них растягивался до тех пор, пока можно сужать остальные. Точнее говоря,

На коленке набросал для случая, если ширина «минимальных» элементов извесна заранее:

<style>
#a { background-color: orange; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
#a, #b, #c { position: absolute; }
#a, #c { width: 6em; }
#a { left: 0; }
#b { left: 6em; right: 6em; }
#c { right: 0; }
</style>

<div id="a">[fixed string]</div>
<div id="b">[rubber string rubber string rubber string rubber string rubber string rubber string]</div>
<div id="c">[fixed string]</div>

Боюсь, что это не то что надо, да?

Здравствуйте, KnazDmitriy, Вы писали:

KD>Начинаю изучать верстку на div-ах. Возникает такая проблема:

KD>Часто требуется выводить некоторые элементы (например div-ы) в одну строку так,
KD>чтобы один из них растягивался до тех пор, пока можно сужать остальные. Точнее говоря,
KD>чтобы все элементы были минимально возможной ширины (ну это просто), а один из них
KD>растянулся на все оставшееся место в элементе-контейнере, в котором все это безобразие находится.
KD>Этот элемент часто бывает самым правым, но может быть и в центре (как сейчас

).
KD>Размер элементов и их количество справа и слева от "резинового" в общем случае не известен.

Вот рабочий пример: http://webmascon.com/topics/coding/43a.asp

Здравствуйте, MBy, Вы писали:

MBy>На коленке набросал для случая, если ширина «минимальных» элементов извесна заранее:
MBy>

MBy><style>
MBy>#a { background-color: orange; }
MBy>#b { background-color: lightgreen; }
MBy>#c { background-color: lightblue; }
MBy>#a, #b, #c { position: absolute; }
MBy>#a, #c { width: 6em; }
MBy>#a { left: 0; }
MBy>#b { left: 6em; right: 6em; }
MBy>#c { right: 0; }
MBy></style>

MBy><div id="a">[fixed string]</div>
MBy><div id="b">[rubber string rubber string rubber string rubber string rubber string rubber string]</div>
MBy><div id="c">[fixed string]</div>
MBy>

MBy>Боюсь, что это не то что надо, да?

Да, это слишком частный случай, здесь все хорошо из-за position: absolute;
В моем случае элементы должны позиционироваться относительно любоко контейнера а не только всего окна.
Но и на этом спасибо.

Все больше убеждаюсь, что даже когда ширина остальных элементов известна, сделать элемент резиновым
не так то просто, что уж говорить об общем случае, наверно придется вводить таблицу.
В конце концов, не так уж и плохо, главное чтоб работало

Здравствуйте, KnazDmitriy, Вы писали:

KD>Да, это слишком частный случай, здесь все хорошо из-за position: absolute;
KD>В моем случае элементы должны позиционироваться относительно любоко контейнера а не только всего окна.
Если absolute это вовсе не обязательно, что оно должно позиционироваться относительно всего окна. Он будет позиционировться относительно родителя, если у него указано relative или absolute.

KD>Все больше убеждаюсь, что даже когда ширина остальных элементов известна, сделать элемент резиновым
KD>не так то просто, что уж говорить об общем случае, наверно придется вводить таблицу.
KD>В конце концов, не так уж и плохо, главное чтоб работало

Кстати, может быть что-то такое натолкнёт на мысль:

<style>
#a { background-color: orange; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
#a, #c { width: 6em; }
#a { float: left; }
#c { float: right; }
</style>

<div id="a">[fixed string]</div>
<div id="c">[fixed string]</div>
<div id="b">[rubber string rubber string rubber string rubber string rubber string rubber string]</div>

KD>Эта проблема с горем пополам решалась с помощью таблиц установкой width="100%" у "резиновой" ячейки.

KD>Искал много где, но толкового, универсального решения не нашел. Помогите.
KD>Пока что это все, что напрягает в div-ах по сравнению с таблицами. В остальном глюки примерно одинаковые.

"Универсального" решения в природе нет и быть не может из-за кривости как CSS, так и браузеров.

Максимально приближенное к универсальности — In search of the One True Layout, которым можно достичь очень многого, но и он не лишен проблем.

... << RSDN@Home 1.2.0 alpha rev. 655>> ... <<Yoki — Кострома>> ...

Здравствуйте, Mamut, Вы писали:

KD>>Эта проблема с горем пополам решалась с помощью таблиц установкой width="100%" у "резиновой" ячейки.

KD>>Искал много где, но толкового, универсального решения не нашел. Помогите.
KD>>Пока что это все, что напрягает в div-ах по сравнению с таблицами. В остальном глюки примерно одинаковые.

M>"Универсального" решения в природе нет и быть не может из-за кривости как CSS, так и браузеров.

M>Максимально приближенное к универсальности — In search of the One True Layout, которым можно достичь очень многого, но и он не лишен проблем.

По моему то, что на той странице приводят — это ужасно

Жуткие хаки в CSS коментариях

Здравствуйте, Mamut, Вы писали:

M>"Универсального" решения в природе нет и быть не может из-за кривости как CSS, так и браузеров.

Угу. В Sciter'е (и в htmlayout) есть flex units и flow в CSS — это как раз оно.

#cont { flow: horizontal; }
#b { width:1*; }
#a,#c { width:min-intrinsic; white-space:nowrap;  }

<div id="cont">
<div id="a">[fixed string]</div>
<div id="b">[rubber string rubber string rubber string rubber string rubber string rubber string]</div>
<div id="c">[fixed string]</div>
</div>

Что самое интересное это то что в html есть relative length units, а CSS так до этого и не дошел.
http://www.w3.org/TR/REC-html40/types.html#type-multi-length

M>>Максимально приближенное к универсальности — In search of the One True Layout, которым можно достичь очень многого, но и он не лишен проблем.

А>По моему то, что на той странице приводят — это ужасно

А>Жуткие хаки в CSS коментариях

А по другому нельзя, увы. Например, из-за этого.

... << RSDN@Home 1.2.0 alpha rev. 655>> ... <<silent>> ...

Здравствуйте, MBy, Вы писали:

MBy>Здравствуйте, KnazDmitriy, Вы писали:

KD>>Да, это слишком частный случай, здесь все хорошо из-за position: absolute;
KD>>В моем случае элементы должны позиционироваться относительно любоко контейнера а не только всего окна.
MBy>Если absolute это вовсе не обязательно, что оно должно позиционироваться относительно всего окна. Он будет позиционировться относительно родителя, если у него указано relative или absolute.

Первый раз слышу, что если position: absolute, то элемент позиционируется относительно родителя.

KD>>Все больше убеждаюсь, что даже когда ширина остальных элементов известна, сделать элемент резиновым
KD>>не так то просто, что уж говорить об общем случае, наверно придется вводить таблицу.
KD>>В конце концов, не так уж и плохо, главное чтоб работало

MBy>Кстати, может быть что-то такое натолкнёт на мысль:
MBy>

MBy><style>
MBy>#a { background-color: orange; }
MBy>#b { background-color: lightgreen; }
MBy>#c { background-color: lightblue; }
MBy>#a, #c { width: 6em; }
MBy>#a { float: left; }
MBy>#c { float: right; }
MBy></style>

MBy><div id="a">[fixed string]</div>
MBy><div id="c">[fixed string]</div>
MBy><div id="b">[rubber string rubber string rubber string rubber string rubber string rubber string]</div>
MBy>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Untitled Document</title>
    
    <style>
    #a { border: 1px solid Red;}
    #b { border: 1px solid Blue; height: 35px; }
    #c { border: 1px solid Green; }
    #a, #c { width: 10px;  height: 30px;}
    #a { float: left; }
    #c { float: right; }
    #x {width: 400px; margin: 0px auto}
    </style>

</head>

<body>
    
    <div id="x">
        <div id="a"></div>
        <div id="a"></div>
        <div id="a"></div>
        <div id="a"></div>
        <div id="c"></div>
        <div id="c"></div>
        <div id="c"></div>
        <div id="c"></div>
        <div id="b"><div>[rubber string] f f f f f f f f f f f f f f f f f f f f f f</div></div>
    </div>

</body>
</html>

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

Сейчас пробую сам поиграться, но что-то пока не получается

Здравствуйте, KnazDmitriy, Вы писали:

MBy>>Если absolute это вовсе не обязательно, что оно должно позиционироваться относительно всего окна. Он будет позиционировться относительно родителя, если у него указано relative или absolute.

KD>Первый раз слышу, что если position: absolute, то элемент позиционируется относительно родителя.

Сам посмотри:

<style>
#rel { position: relative; top: 30; left: 30; width: 50%; background-color: orange; }
#abs { position: absolute; top: 0; left: 0; width: 50%; background-color: green; }
</style>

<div id="rel">[relative parent div]<br>[relative parent div]<br>[relative parent div]
    <div id="abs">[absolute child div]</div>
</div>

Второй div уже не от экрана меряеться, а от родителя.

	От:	KnazDmitriy
	Дата:	08.08.06 15:27
	Оценка:

	От:	MBy
	Дата:	08.08.06 18:23
	Оценка:

	От:	Mikhail Polykovsky
	Дата:	09.08.06 02:51
	Оценка:

	От:	KnazDmitriy
	Дата:	09.08.06 07:54
	Оценка:

	От:	MBy
	Дата:	09.08.06 09:33
	Оценка:

От:	Mamut	http://dmitriid.com
Дата:	09.08.06 14:38
Оценка:	5 (1)

От:	c-smile	http://terrainformatica.com
Дата:	09.08.06 16:32
Оценка:	+1