Есть <div id=1>, в него вложен <div id=2>. Если вписать во второй див текст, то див увеличится в высоту и соответственно растянет первый див.
Но так работает только в ИЕ, а в опере и ФФ размер первого дива не меняется.
Подскажите, пожалуйста, как это исправить?
не поверил, поэтому решил сам все написать.. вот академический пример:Есть <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>
А попробуй вместо текста
вставить 3 диваКод: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 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>
to Defnur
Во-первых, если уж приводим пример кода, не забываем про то, что в CSS необходимо указывать единицы измерения. В Вашем случае – px.
Во-вторых, мы наблюдаем здесь ожидаемое поведение блочной модели.
Контейнер, в котором располагается элемент с float, перестает этот элемент с float "замечать". В связи с этим, если он будет заканчиваться раньше элемента с float по высоте, элемент с float будет проваливаться через низ этого контейнера. Результатом такого феномена при раскладке элементов на странице является тот факт, что если какой-либо контейнер содержит в себе только лишь элементы с float, его высота схлопывается в нуль.
Лекарство:
Назначаем контейнеру (родительскому блоку) свойство overflow: hidden; и радуемся...
Поправка:
Решение с overflow: hidden не работает в IE. Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...
Aykroyd
О, спасибо огромное
Сутки убил на решение проблемы, и если бы не вы, может ещё неделя ушла зря )
P.S. а это глюк или так и должно быть?
а можно еще после этих блоков:
<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; }<div style="width: 300; float: left">* А попробуй вместо текста
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">
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>. Если вписать во второй див текст,
[/quote]
Не за что.
Это не глюк.
На самом деле это поведение, наряду со схлопыванием верхних и нижних полей элементов, является попыткой заставить блочную модель CSS нормально вести себя в условиях простого потока текста.
Если в одном из абзацев встречается изображение, может возникнуть необходимость сдвинуть это изображение, например, влево (float: left, чтобы текст обтекал его с правой стороны. Если сдвигаемое изображение будет занимать по высоте больше, чем текст первого обтекающего его абзаца, и если оно при этом будет растягивать этот абзац и отодвигать начало следующего абзаца ниже, то это будет выглядеть некрасиво из-за увеличения расстояния между этими абзацами. В связи с этим изображение и проваливается через границы всех абзацев, сохраняя между ними одинаковое расстояние, в то время как текст этих абзацев соответствующим образом его обтекает.
Описанное выше поведение удобно для форматирования текста в прямом потоке, но в то же время создает проблему "проваливания" при раскладке элементов на странице с использованием свойства float. С этой проблемой Вы и столкнулись.
Зачем лишний див?
[/quote]
Вы совершенно правы.
Автор действительно не указал с самого начала всех тонкостей и нюансов.
знаю.. но бывает иногда, что без этого дива не обойтись..Зачем лишний див? smile.gif Это не есть хорошо, если можно обойтись и без него. smile.gif
вот сейчас, например, верстаю сайт.. так там нужно, чтобы контейнер был резиновый (и по гориз., и по верт.).. мне кажется, что в этом случае без этого clear никак..
хотя нет, есть еще один способ..
родителю прописываем float:left или right в зависимости от дочек..
а затем все возвращаем в нормальный поток (если надо)..
теперь, кажется, все..
или нет?
[/quote]Originally posted by garA@Feb 21 2007, 15:40
знаю.. но бывает иногда, что без этого дива не обойтись..
вот сейчас, например, верстаю сайт.. так там нужно, чтобы контейнер был резиновый (и по гориз., и по верт.).. мне кажется, что в этом случае без этого clear никак..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
Без лишних четырех вложенных дивов не обойтись только в том случае, если углы у блока должны быть закругленные. Во всех остальных случаях – overflow: hidden; или вообще ничего не нужно.
Иногда, конечно, для достижения того или иного эффекта приходится городить даже больше четырех вложенных дивов. Но это уже крайности:
[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
По-моему это уже опять "перемудрствование"...
Вы это про что?Без лишних четырех вложенных дивов не обойтись только в том случае, если углы у блока должны быть закругленные. Во всех остальных случаях – overflow: hidden; или вообще ничего не нужно. smile.gif
Мы, наверное, друг друга не так поняли..
Я имел в виду следующее:
Этот метод применяется в том случае, если overflow:hidden не подходит..Код:<div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * <div style="float:left;"> * * * * bla-bla-bla * </div> * </div>
и тут я с вами не согласен, хотя, как говорят, сколько людей столько и мнений..По-моему это уже опять "перемудрствование"... smile.gif
P.S. Народ, может поделитесь, кто какие методы использует и почему.. Может действительно я не прав..
Оффтоп: Aykroyd, я бы хотел узнать, когда закончится реконструкция вашего корпоративного веб-сайта ([Только зарегистрированные пользователи могут видеть ссылки. ]).. Я бы хотел посмотреть инфу о спутниковом инетернете.. Спасибо..
Очень хочу пример, где overflow:hidden не подходит...Originally posted by garA@Feb 21 2007, 18:05
Вы это про что?
Мы, наверное, друг друга не так поняли..
Я имел в виду следующее:
Этот метод применяется в том случае, если overflow:hidden не подходит..Код:<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>
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
[/quote]Originally posted by garA@Feb 21 2007, 18:05
Оффтоп: Aykroyd, я бы хотел узнать, когда закончится реконструкция вашего корпоративного веб-сайта ([Только зарегистрированные пользователи могут видеть ссылки. ]).. Я бы хотел посмотреть инфу о спутниковом инетернете.. Спасибо..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
Оффтоп:
Очень скоро.
А пока инфу о спутниковом Интернете можно посмотреть вот [Только зарегистрированные пользователи могут видеть ссылки. ].
Не вопрос..Очень хочу пример, где overflow:hidden не подходит...
вы писали :
Итак, вопрос: А что делать, если ни ширина, ни высота блока неизвестна?Лекарство:
Назначаем контейнеру (родительскому блоку) свойство overflow: hidden; и радуемся...
Поправка:
Решение с overflow: hidden не работает в IE. Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...
P.S. Если сегодняшний сайт завтра будет готов, то я скину ссылку, чтобы вы сами все посмотрели..
Высота блока в MSIE, как правило, известна всегда и равна 1px. Шутка. Действительно, overflow: hidden; в данном случае накладывает свои ограничения.А что делать, если ни ширина, ни высота блока неизвестно?
Поправлю. Чтобы «Осёл» вел себя как надо, для контейнера должно быть включено свойство [Только зарегистрированные пользователи могут видеть ссылки. ]. Включается оно, как видим, не только задачей width или height. Если сайт не верстается для MSIE<5.5, то имеет смысл посмотреть в сторону zoom: 1; (невалидно).Чтобы Осел вел себя как надо, для контейнера должна быть явно задана ширина или высота (например, width: 100%)...
Не забываем про [Только зарегистрированные пользователи могут видеть ссылки. ]. Ещё [Только зарегистрированные пользователи могут видеть ссылки. ].
[/quote]
В данном случае overflow: hidden; ни коим образом к MSIE не относится. Для него – свои индивидуальные рEshЕнИya.
[/quote]
В очередной раз снимаю шляпу...
Только, наверное, чаще все-таки 1%, а не px...
[/quote]Originally posted by makeitso@Feb 21 2007, 20:21
Поправлю. Чтобы «Осёл» вел себя как надо, для контейнера должно быть включено свойство [Только зарегистрированные пользователи могут видеть ссылки. ]. Включается оно, как видим, не только задачей width или height. Если сайт не верстается для MSIE<5.5, то имеет смысл посмотреть в сторону zoom: 1; (невалидно).
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
to garA
Вот так всегда. Приходит, понимаете, один из очень почитаемых мной гуру и как даст мне "подзатыльник" информацией, о которой я даже и не слыхивал...
to makeitso
Спасибо Вам в очередной раз.
Ваши права
