Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблема с DIV в IE


Автор: boogi 12.2.2008, 17:52
Добрый вечер всем. Столкнулся в небольшой проблемой. Надеюсь на вашу помощь.

Есть 2 DIV.

Код

<div style="min-width: 250px; width: 250px; float: left; border:1px solid black;"></div>
<div style="min-width: 525px;width:525px;margin:0 0 0 250px;border:1px solid black;">Text goes here</div>


Все работает верно, однако в IE (v6.0 у меня, как в других точно не знаю) при уменьшении размеров окна 2 ой DIV съезжает с уровня вниз. Получается что правый нижний угол 1го DIVа касается левого верхнего 2го DIVa. Как можно это исправить?

PS: Есть ли способ сделать min-width в IE?

Спасибо.

Автор: bars80080 12.2.2008, 18:09
margin:0 0 0 250px - он же у тебя на эту ширину маргина и падает

Добавлено через 2 минуты и 32 секунды
если нужно чтобы оставались на одном уровне, то засунь их в один див:
Код

<style>
.qw { width: 250px; float: left; border: 1px solid black; }
.as { width: 525px; margin: 0 0 0 250px; border:1px solid black; }
.er { width: 780px; }
</style>
<div class="er">
<div class="qw">qasefra</div>
<div class="as">Text goes here</div>
</div>

Автор: boogi 12.2.2008, 18:15
bars80080, спасибо
вопрос исчерпан (я надеюсь =)

Автор: NDenis 13.2.2008, 16:13
bars80080, а бордюры вы не учитываете? они ведь тоже участвуют при расчете ширины блока
boogi, странно, если у вас все заработает smile 
вариант №1: использование контейнера:
ширину контейнера width: 782px;
вариант №2: без контейнера: margin: 0 0 0 252px;
собственно эти 2 пикселя бордюра и играли

B еще, заглядывая вперед, в IE увидите пробел между блоками. Лечится добавлением отрицательного отступа для float-блока:
.qw { width: 250px; float: left; border: 1px solid black; margin-right:-252px; }

Автор: bars80080 13.2.2008, 16:25
NDenis, 250 + 525 = 775, установив 780px я учёл автоматом всякие случайности, а как там нужно аффтору, он и сам разберётся

и второе, однако всё-таки имею привычку проверять работает или нет пример (хотя бы в представленных условиях), это же можно увидеть, раз я перетащил все стили в таблицу

кстати, лично против подобных зверств ввиде -252px, (исключительно интуитивно, пока особо объяснить не могу почему, т.к. попытался сверстать "правильный" сайт на дивах, долго мучался со всей этой атрибутикой с плавающими колонками и скачущим футером, в итоге вернулся к проверенной таблице и возрадовался  smile )

Автор: NDenis 13.2.2008, 17:09
bars80080, не знаю как вы проверяли, но у меня ваш код в IE не работал. Может DOCTYPE сыграл роль (у меня по привычке xhtml 1.0 strict smile )
А "зверства" с отрицательными маргинами, ИМХО, не такие страшные. Надо же как-то приводить детище мелкософта в чувства.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)