вложенные дивы и вертикальная резина

Вид для печати

20.02.2007, 19:32
Defnur

Есть <div id=1>, в него вложен <div id=2>. Если вписать во второй див текст, то див увеличится в высоту и соответственно растянет первый див.
Но так работает только в ИЕ, а в опере и ФФ размер первого дива не меняется.

Подскажите, пожалуйста, как это исправить?
20.02.2007, 19:42
garA

Цитата:

Есть <div id=1>, в него вложен <div id=2>. Если вписать во второй див текст, то див увеличится в высоту и соответственно растянет первый див.
Но так работает только в ИЕ, а в опере и ФФ размер первого дива не меняется.

не поверил, поэтому решил сам все написать.. вот академический пример:

Код:

<!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 type="text/css"> #box1{ ****background:#ffc; ****width:400px; ****padding-bottom:100px; } #box2{ ****background:#6c0; ****color:#fff; } </style> </head> <body> <div id="box1"> ****<div id="box2"> **** Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> **** Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> **** Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> ****</div> </div> </body> </html>

везде все работает..
:hi:
20.02.2007, 20:36
Defnur

А попробуй вместо текста

Код:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

вставить 3 дива

Код:

****<div style="width: 50; float: left"></div> ****<div style="width: 300; float: left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> ****<div style="width: 50; float: left"></div>

и не будет работать )
21.02.2007, 00:42
Aykroyd

to Defnur

Во-первых, если уж приводим пример кода, не забываем про то, что в CSS необходимо указывать единицы измерения. В Вашем случае – px.

Во-вторых, мы наблюдаем здесь ожидаемое поведение блочной модели.

Контейнер, в котором располагается элемент с float, перестает этот элемент с float "замечать". В связи с этим, если он будет заканчиваться раньше элемента с float по высоте, элемент с float будет проваливаться через низ этого контейнера. Результатом такого феномена при раскладке элементов на странице является тот факт, что если какой-либо контейнер содержит в себе только лишь элементы с float, его высота схлопывается в нуль.

Лекарство:
Назначаем контейнеру (родительскому блоку) свойство overflow: hidden; и радуемся...

Поправка:
Решение с overflow: hidden не работает в IE. Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...
21.02.2007, 09:52
Defnur

Aykroyd

О, спасибо огромное [Only registered and activated users can see links. Click Here To Register...]
Сутки убил на решение проблемы, и если бы не вы, может ещё неделя ушла зря )

P.S. а это глюк или так и должно быть?
21.02.2007, 11:24
garA

а можно еще после этих блоков:

<div style="width: 300; float: left">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
[/code][/quote]
написать

Код:

, где clear{ * * * clear:both; * * * height:1px; * * * font-size:1px; }

Цитата:

* А попробуй вместо текста
CODE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

вставить 3 дива
CODE
<div style="width: 50; float: left">

<div style="width: 300; float: left">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>

и не будет работать )[/quote]
я привел пример в соответсвии, так сказать, с заданием:

Цитата:

Есть <div id=1>, в него вложен <div id=2>. Если вписать во второй див текст,
21.02.2007, 14:53
Aykroyd

Цитата:

Originally posted by Defnur@Feb 21 2007, 09:52
Aykroyd
О, спасибо огромное* [Only registered and activated users can see links. Click Here To Register...]
Сутки убил на решение проблемы, и если бы не вы, может ещё неделя ушла зря )
P.S. а это глюк или так и должно быть?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Не за что.

Это не глюк.
На самом деле это поведение, наряду со схлопыванием верхних и нижних полей элементов, является попыткой заставить блочную модель CSS нормально вести себя в условиях простого потока текста.
Если в одном из абзацев встречается изображение, может возникнуть необходимость сдвинуть это изображение, например, влево (float: left;), чтобы текст обтекал его с правой стороны. Если сдвигаемое изображение будет занимать по высоте больше, чем текст первого обтекающего его абзаца, и если оно при этом будет растягивать этот абзац и отодвигать начало следующего абзаца ниже, то это будет выглядеть некрасиво из-за увеличения расстояния между этими абзацами. В связи с этим изображение и проваливается через границы всех абзацев, сохраняя между ними одинаковое расстояние, в то время как текст этих абзацев соответствующим образом его обтекает.

Описанное выше поведение удобно для форматирования текста в прямом потоке, но в то же время создает проблему "проваливания" при раскладке элементов на странице с использованием свойства float. С этой проблемой Вы и столкнулись. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by garA@Feb 21 2007, 11:24
а можно еще после этих блоков:
написать

Код:

<div class="clear"></div>, где clear{ * * * clear:both; * * * height:1px; * * * font-size:1px; }

<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

Зачем лишний див? [Only registered and activated users can see links. Click Here To Register...] Это не есть хорошо, если можно обойтись и без него. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by garA@Feb 21 2007, 11:24
я привел пример в соответсвии, так сказать, с заданием:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Вы совершенно правы.
Автор действительно не указал с самого начала всех тонкостей и нюансов. [Only registered and activated users can see links. Click Here To Register...]
21.02.2007, 15:40
garA

Цитата:

Зачем лишний див? smile.gif Это не есть хорошо, если можно обойтись и без него. smile.gif

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

:hi:
21.02.2007, 15:45
garA

хотя нет, есть еще один способ..
родителю прописываем float:left или right в зависимости от дочек..
а затем все возвращаем в нормальный поток (если надо)..

теперь, кажется, все.. [Only registered and activated users can see links. Click Here To Register...]
или нет? [Only registered and activated users can see links. Click Here To Register...]
21.02.2007, 16:34
Aykroyd

Цитата:

Originally posted by garA@Feb 21 2007, 15:40
знаю.. но бывает иногда, что без этого дива не обойтись..
вот сейчас, например, верстаю сайт.. так там нужно, чтобы контейнер был резиновый (и по гориз., и по верт.).. мне кажется, что в этом случае без этого clear никак..
:hi:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Без лишних четырех вложенных дивов не обойтись только в том случае, если углы у блока должны быть закругленные. Во всех остальных случаях – overflow: hidden; или вообще ничего не нужно. [Only registered and activated users can see links. Click Here To Register...]

Иногда, конечно, для достижения того или иного эффекта приходится городить даже больше четырех вложенных дивов. Но это уже крайности:
[Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by garA@Feb 21 2007, 15:45
хотя нет, есть еще один способ..
родителю прописываем float:left или right в зависимости от дочек..
а затем все возвращаем в нормальный поток (если надо)..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
По-моему это уже опять "перемудрствование"... [Only registered and activated users can see links. Click Here To Register...]
21.02.2007, 18:05
garA

Цитата:

Без лишних четырех вложенных дивов не обойтись только в том случае, если углы у блока должны быть закругленные. Во всех остальных случаях – overflow: hidden; или вообще ничего не нужно. smile.gif

Вы это про что?
Мы, наверное, друг друга не так поняли..
Я имел в виду следующее:

Код:

<div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * </div>

Этот метод применяется в том случае, если overflow:hidden не подходит..

Цитата:

По-моему это уже опять "перемудрствование"... smile.gif

и тут я с вами не согласен, хотя, как говорят, сколько людей столько и мнений..
:hi:

P.S. Народ, может поделитесь, кто какие методы использует и почему.. Может действительно я не прав..

Оффтоп: Aykroyd, я бы хотел узнать, когда закончится реконструкция вашего корпоративного веб-сайта ([Only registered and activated users can see links. Click Here To Register...]).. Я бы хотел посмотреть инфу о спутниковом инетернете.. Спасибо..
21.02.2007, 18:44
Aykroyd

Цитата:

Originally posted by garA@Feb 21 2007, 18:05
Вы это про что?
Мы, наверное, друг друга не так поняли..
Я имел в виду следующее:

Код:

<div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * <div style="clear:both; height:1px; font-size:1px;"></div> </div>

Этот метод применяется в том случае, если overflow:hidden не подходит..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

Очень хочу пример, где overflow:hidden не подходит... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by garA@Feb 21 2007, 18:05
Оффтоп: Aykroyd, я бы хотел узнать, когда закончится реконструкция вашего корпоративного веб-сайта ([Only registered and activated users can see links. Click Here To Register...]).. Я бы хотел посмотреть инфу о спутниковом инетернете.. Спасибо..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Оффтоп:
Очень скоро. [Only registered and activated users can see links. Click Here To Register...]
А пока инфу о спутниковом Интернете можно посмотреть вот [Only registered and activated users can see links. Click Here To Register...]. [Only registered and activated users can see links. Click Here To Register...]
21.02.2007, 19:14
garA

Цитата:

Очень хочу пример, где overflow:hidden не подходит...

Не вопрос..
вы писали :

Цитата:

Лекарство:
Назначаем контейнеру (родительскому блоку) свойство overflow: hidden; и радуемся...

Поправка:
Решение с overflow: hidden не работает в IE. Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...

Итак, вопрос: А что делать, если ни ширина, ни высота блока неизвестна?

P.S. Если сегодняшний сайт завтра будет готов, то я скину ссылку, чтобы вы сами все посмотрели..
:hi:
21.02.2007, 20:21
makeitso

Цитата:

А что делать, если ни ширина, ни высота блока неизвестно?

Высота блока в MSIE, как правило, известна всегда и равна 1px. Шутка. Действительно, overflow: hidden; в данном случае накладывает свои ограничения.

Цитата:

Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...

Поправлю. Чтобы «Осёл» вел себя как надо, для контейнера должно быть включено свойство [Only registered and activated users can see links. Click Here To Register...]. Включается оно, как видим, не только задачей width или height. Если сайт не верстается для MSIE<5.5, то имеет смысл посмотреть в сторону zoom: 1; (невалидно).

Не забываем про [Only registered and activated users can see links. Click Here To Register...]. Ещё [Only registered and activated users can see links. Click Here To Register...].
21.02.2007, 22:24
Aykroyd

Цитата:

Originally posted by garA@Feb 21 2007, 19:14
Итак, вопрос: А что делать, если ни ширина, ни высота блока неизвестно?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
В данном случае overflow: hidden; ни коим образом к MSIE не относится. Для него – свои индивидуальные рEshЕнИya.

Цитата:

Originally posted by makeitso@Feb 21 2007, 20:21
Высота блока в MSIE, как правило, известна всегда и равна 1px. Шутка.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
В очередной раз снимаю шляпу... :hi: [Only registered and activated users can see links. Click Here To Register...]
Только, наверное, чаще все-таки 1%, а не px... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by makeitso@Feb 21 2007, 20:21
Поправлю. Чтобы «Осёл» вел себя как надо, для контейнера должно быть включено свойство [Only registered and activated users can see links. Click Here To Register...]. Включается оно, как видим, не только задачей width или height. Если сайт не верстается для MSIE<5.5, то имеет смысл посмотреть в сторону zoom: 1; (невалидно).
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
to garA
Вот так всегда. Приходит, понимаете, один из очень почитаемых мной гуру и как даст мне "подзатыльник" информацией, о которой я даже и не слыхивал... [Only registered and activated users can see links. Click Here To Register...] И ведь лежит у меня в "загашнике" этот zoom: 1;. Другое дело, что из-за невалидности я стараюсь его не пользовать, но... Здесь и мне определенно нужен был соответствующий "толчок"... [Only registered and activated users can see links. Click Here To Register...]

to makeitso
Спасибо Вам в очередной раз. [Only registered and activated users can see links. Click Here To Register...]