Дивы в стоку

[leventov]

Знаю, что проблема обсуждалась миллион раз, но решения не могу найти.

<div id="main">
	<div id="col1"></div>
	<div id="col2"></div>
	<div id="col3"></div>
</div>

Первые 2 колонки должны выравниваться влево, при этом у обоих ширина 25%. третья - вправо, ширина - по контенту. Высота у всех трех фиксированная.

Так вот, никак не могу добиться того, чтобы третья колонка не вываливалась вниз. #main{overflow:hidden}, #main>div{display:inline-block}, задание высоты у всего что можно, добавление <br clear="all"> - ничего не помогает

[psywalker]

http://jsfiddle.net/jqePu/

[leventov]

http://jsfiddle.net/jqePu/

Спасибо! На базе ваших заклинаний удалось построить полное решение. Любопытно, что по смыслу #col3 должен быть inline-block, table-cell и float:right одновременно (не спрашивайте, зачем). В итоговом варианте напрямую вложены друг в друга 7 дивов

[psywalker]

inline-block, table-cell и float:right одновременно

Это что-то новенькое, обязательно выложи глянуть))

[Splin]

Знаю, что проблема обсуждалась миллион раз, но решения не могу найти.

<div id="main">
	<div id="col1"></div>
	<div id="col2"></div>
	<div id="col3"></div>
</div>

Первые 2 колонки должны выравниваться влево, при этом у обоих ширина 25%. третья - вправо, ширина - по контенту. Высота у всех трех фиксированная.

Так вот, никак не могу добиться того, чтобы третья колонка не вываливалась вниз. #main{overflow:hidden}, #main>div{display:inline-block}, задание высоты у всего что можно, добавление <br clear="all"> - ничего не помогает

Вот специально раздел создан http://htmlbook.ru/layout Посмотри как верстают 3 колнки и сделай так же.

Edited March 16, 2012 by Splin

[sigma77]

inline-block, table-cell и float:right одновременно

Это что-то новенькое, обязательно выложи глянуть))

Ага, тоже хотелось бы взглянуть. Т.к. все три свойства противоречат друг другу.

[leventov]

Вероятно, можно было устроить в 3 раза проще... http://jsfiddle.net/zjR9m/