не коррeктно работает clear:both

[kent666]

всем привет.

Сделал шаблон сайта из 2-х колонок ( 1 статическая, вторая резиновая)

на первой колонке

float: left;
width: 300px;

вторая

margin-left: 400px;

но если во второй колонке появляется контент со свойством clear:both, то блок кидает вниз на уровень окончания перовой колонки. Как сделать так что бы clear:both работал только на уровне второй колонки (то есть на содержимое не влияли плавающие элементы вне блока)

[ShumNo]

у второй колонки так же проставить float // первое что пришло в голову

с наглядным кодом было бы проще

[kent666]

тогда она уже не будет резиновой

да кода не так уж и много

div #left {
    float: left;
    width: 200px;
}
div #right {
    margin: 0 0 0 220px;
}

Edited June 23, 2012 by kent666

[ShumNo]

так она у вас и так фиксированная - размеры то все в пикселях а не в %

[moron]

так она у вас и так фиксированная - размеры то все в пикселях а не в %

Правая колонка резиновая.

[ShumNo]

аа это маргин... перепутал...

без тестовой странички я наверно не скажу, подождите других или сделайте хотябы тут http://jsfiddle.net/

[moron]

сделайте хотябы тут http://jsfiddle.net/

http://jsfiddle.net/DQCFW/ как я понял автора

[sammasati]

Правой колонке нужно overflow: hidden; добавить. Должно помочь.

[kent666]

даже http://jsfiddle.net/DQCFW/ видно что на внутренний блок с clear:both влияет левая "плавающая" колонка.

Только как отменить влияние внешних плавающих блоков

[moron]

Только как отменить влияние внешних плавающих блоков

Похоже никак, а что именно вы хотите сделать, может быть возможно попытаться другим способом?

[kent666]

Только как отменить влияние внешних плавающих блоков

Похоже никак, а что именно вы хотите сделать, может быть возможно попытаться другим способом?

Просто в правую колонку попадает content (это может быть разные элементы) которые могут содержать что угодно. Но если они нормально смотрятся к примеру в header то попадая в content искажаются, при чем довольно сильно. Не красиво смотриться элемент в котором по середине щель в 200px

[kent666]

Правой колонке нужно overflow: hidden; добавить. Должно помочь.

Вроде бы сработало

[SelenIT]

Другими словами, задать правой колонке отдельный блочный контекст форматирования. Кроме overflow: hidden, для этого годятся display: table или display: table-cell. А чтобы колонка растягивалась на всю доступную ширину даже при нехватке контента, можно использовать такую добавку.

[moron]

Вроде бы сработало

А тут почему-то работало не так как надо : http://jsfiddle.net/DQCFW/2/ в чем проблема?

[sammasati]

А что не так? По-моему, все верно. Раньше контент в правой колонке начинался после контента в левой, а теперь он начинается с начала блока, как и должно быть.

[moron]

http://rghost.ru/38835420/image.png Ничего не начинается у меня в хроме.Из справочника: "overflow:hidden Отображается только область внутри элемента, остальное будет скрыто" - вот и скрылось у меня что-то.

—

А вот лиса и осел все правильно отображают - только что проверил.

Edited June 23, 2012 by moron

[sammasati]

Странно. У меня в хроме все ок. Справа синий блок. А без overflow: hidden синий блок есть? А версия хрома какая?

[moron]

Без overflow блок был. Версия была 12, только что обновился и все встало на места. Не могли бы разъяснить, почему overflow: hidden сработал так, ведь в справочнике совсем что-то другое?

[sammasati]

Он ещё и отменяет действие float'а. Ну или по-научному "задает отдельный блочный контекст форматирования". Но тут SelenIT больше меня разбирается, может он объяснит.

А вот ещё можно почитать: http://htmlbook.ru/samlayout/blochnaya-verstka/plavayushchie-elementy

[Cerberus]

В общем примерно такая же проблема.

Есть один блок с фиксированной шириной, есть второй, который должен быть справа от первого и растягиваться сколько есть сил :-)

Код такой такой

Но никак блок справа не хочет быть справа, если в него что-то поместить.....

Изображение, абзац, неважно....

Что можно сделать?

Предложенный выше overflow: hidden; не помогает....

[Cerberus]

Сделал, почитав здесь вот так, но все равно блок с синим фоном "уходит" вниз.....

Edited June 24, 2012 by Cerberus

[moron]

В общем примерно такая же проблема.

Есть один блок с фиксированной шириной, есть второй, который должен быть справа от первого и растягиваться сколько есть сил :-)

Код такой такой

Но никак блок справа не хочет быть справа, если в него что-то поместить.....

Изображение, абзац, неважно....

Что можно сделать?

Предложенный выше overflow: hidden; не помогает....

Вот что сделал я http://jsfiddle.net/L76rS/ . Ох уж эти хтмл5 теги, пришлось открывать справочник

--

Проверял только в хроме.

Edited June 24, 2012 by moron

[psywalker]

Не читал все посты выше, хрен его знает, решили уже или нет) Но, со своей стороны могу предложить следующее.

А сам трабл в одном общем контексте, в котором находятся aside и article.

[Cerberus]

moron, psywalker - БЛАГОДАРЮ!!!

Можете пояснить это:

А сам трабл в одном общем контексте, ...

И насколько верно тогда такое вложение тегов:

<section>
   <article>
   </article>
</section>