Колоночные макеты

[DjTarik]

Сразу ссылку на проблему:

http://tarik.kasperovich.ru/test/index.html

Имеем макет, колонки построены с помощью 'float'.

Если в основной колонке (в моём случае - в жёлтой) заюзать свойство 'clear' - очистит до самой длинной из "отфлоченых" (на макете прекрасно все видно).

Собственно вопрос: какие вы знаете способы решения данной проблемы? Нужно, чтобы 'clear' работал только в своей колонке.

Боковые колонки известной ширины - все остальное занимает центральная. На всю оставшуюся ширину, а не в зависимости от контента.

P.S. В гугле был, но толкового решения так и не нашёл.

P.P.S. overflow: hidden; - не подходит, т.к. хотелось бы иметь возможность выхода поверх центрального блока;

display: table; - то, что нужно, но тогда всё зависит от содержимого центральной колонки, а хотелось бы, чтобы сразу див занимал все оставшуюся ширину.

Вроде всё объяснил. Поправьте, если что не так.

Спасибо.

[psywalker]

Я не понял, а что в итоге должно получиться?

[DjTarik]

Я не понял, а что в итоге должно получиться?

В жёлтой колонке див с 'clear' не должен опускаться вниз.

[psywalker]

А что если сам контент обернуть в див с overflow: hidden;

<div class="center-col">
<div style="overflow: hidden;">
<p>Quisque nec mi magna, eu posuere augue. Nam vestibulum erat sit amet felis rutrum posuere. Curabitur cursus luctus eleifend. Etiam molestie sapien sed mauris vehicula vulputate. Morbi vestibulum felis vitae nulla gravida quis imperdiet ipsum euismod.</p>
<div class="clear-line">Clear</div>
<p>Maecenas placerat erat ac orci dapibus elementum in sed sem. Nam euismod velit a risus vestibulum vehicula. Aliquam at lorem vel neque cursus dapibus. Donec congue tincidunt fermentum. Integer quam mi, eleifend sit amet ultrices sed, tincidunt hendrerit libero. Sed nec quam eu justo ullamcorper condimentum fringilla ut lorem.</p>
</div>
</div>

[DjTarik]

А что если сам контент обернуть в див с overflow: hidden;

<div class="center-col">
<div style="overflow: hidden;">
<p>Quisque nec mi magna, eu posuere augue. Nam vestibulum erat sit amet felis rutrum posuere. Curabitur cursus luctus eleifend. Etiam molestie sapien sed mauris vehicula vulputate. Morbi vestibulum felis vitae nulla gravida quis imperdiet ipsum euismod.</p>
<div class="clear-line">Clear</div>
<p>Maecenas placerat erat ac orci dapibus elementum in sed sem. Nam euismod velit a risus vestibulum vehicula. Aliquam at lorem vel neque cursus dapibus. Donec congue tincidunt fermentum. Integer quam mi, eleifend sit amet ultrices sed, tincidunt hendrerit libero. Sed nec quam eu justo ullamcorper condimentum fringilla ut lorem.</p>
</div>
</div>

Неудобно. Хочется сразу разобраться со всей колонкой, а не прописывать для блоков 'overflow'. Я уже пробовал - отказался от него. Что-нить ещё есть?

[psywalker]

Ещё есть overflow: auto;"

[DjTarik]

Ещё есть overflow: auto;"

тогда появятся полосы прокрутки. =(

[DjTarik]

А может решения и вовсе нету?=)

P.S. Тогда может стоит использовать другой способ построения 2-3колоночных макетов? Кто чего использует, чтобы не было таких моментов с 'clear'?

[psywalker]

А может решения и вовсе нету?=)

P.S. Тогда может стоит использовать другой способ построения 2-3колоночных макетов? Кто чего использует, чтобы не было таких моментов с 'clear'?

Не знаю, я всегда использую один и тот-же, никогда ещё не было проблем. А ты постоянно какие то себе велосипеды изобретаешь, типа как тогда помнишь, красный фон под основным блоком? Вообще бред, но тебе принципиально))

[DjTarik]

Не знаю, я всегда использую один и тот-же, никогда ещё не было проблем. А ты постоянно какие то себе велосипеды изобретаешь, типа как тогда помнишь, красный фон под основным блоком? Вообще бред, но тебе принципиально))

Я не изобретаю - я ищу)

Доскональное изучение проблемы помагает понять суть ошибок и не повторять их снова.

P.S. Если не сложно - дай ссылку на твой способ построения колонок...

[hopes_in_life]

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

[psywalker]

P.S. Если не сложно - дай ссылку на твой способ построения колонок...

Да нафига, ты же в курсе, Три колонки, левая, правая флоаты, а контент с оверфлоу, да и всё

[@LEXXX_NF]

Зачем мучиться со своим велосипедом, когда их вон сколько: http://blog.html.it/layoutgala/? Выбирай подходящий и катайся

[psywalker]

Зачем мучиться со своим велосипедом, когда их вон сколько: http://blog.html.it/layoutgala/? Выбирай подходящий и катайся

Да нее, просто бывает человеку скучно жить, вот он и ищет себе занятие.

[Justnewone]

Да нее, просто бывает человеку скучно жить, вот он и ищет себе занятие.

Отвечу только за себя, без флуда и срача, пожалуйста. Когда мне интересно что-то углубить, я сижу и углубляю, гуглю, потом результаты иногда тут выкладываю, а не пытаюсь других людей озадачить.

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

[SelenIT]

В общем случае искомое "лекарство" называется контекстом форматирования.

[DjTarik]

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

Не, для меня абсолютное позиционирование не подходит. На нём все понятно. Хочется без)

Зачем мучиться со своим велосипедом, когда их вон сколько: http://blog.html.it/layoutgala/? Выбирай подходящий и катайся

Так там все через флот у дива-обертки. И элементы по-колхозному располагаются.)))

В общем случае искомое "лекарство" называется контекстом форматирования.

А вот за ссылку спасибо. Перепробовал все три метода... Наверное всё-таки остановлюсь на display: table; Хотя еще может чего придумаю)