разделить див на 4 части @ DeForum.ru

Коллеги, помогите, plz. В ночи подклинивает что-то. Чайницкий вопрос не могу осилить. Есть страница с дивом, отцентрированным посередине. Надо в этот див впихнуть 4 дива процентых размеров, которые будет делить главный на 4 части. Ну вот так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>the site</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />
<style type="text/css" media="Screen">
/*\*/@import url("css/master.css");/**/
</style
</head>
<body>
<div style="position:absolute;width:90%;height:90%;left:5%;top:5%;border:1px solid black;">вот сюда 4 дива</div>

</body>
</html>

1.

Код:

<div style="position:absolute;width:50%;height:50%;left:0;top:0;"></div>
<div style="position:absolute;width:50%;height:50%;right:0;top:0;"></div>
<div style="position:absolute;width:50%;height:50%;left:0;bottom:0;"></div>
<div style="position:absolute;width:50%;height:50%;right:0;bottom:0;"></div>

2.

Код:

<div style="float:left;width:50%;min-height:50%;_height:50%;"></div>
<div style="float:left;width:50%;min-height:50%;_height:50%;"></div>
<div style="float:left;width:50%;min-height:50%;_height:50%;"></div>
<div style="float:left;width:50%;min-height:50%;_height:50%;"></div>

вопросы переполнения, отступов, полей и границ не подымались.

karamba,

спасибо. Первый вариант. Второй работает, я тоже думал про float, но имеет место соскальзывание в ИЕ.
ммм... min-height меня ещё смущает для ИЕ, хотя работает в обоих вариантах. Это я проверю. А отступы, поля, границы -- это, думаю, не самое сложное, те же проценты. Переполнение -- если текстовое, то overflow: scroll; если картинки или формы, то, думаю, тот же min-height, или min-width.
Спасибо ещё раз.
А! А что такое _height?

Цитата:

А! А что такое _height?

Это видимо, как раз для экслорера, хотя честно не знаю, догадака просто..

tentoys писал(а):

А что такое _height?

это то, почему

tentoys писал(а):

работает в обоих вариантах

хак для ИЕ6, не понимающего min-height. Это я для инлайн-стиля втулил. В отдельном цсс-е можно через валидный фильтр указать или кондишнкомментом, как угодно.
Флоат можно тоже, второму и четвертому указать флоат:райт.
Насчет соскальзывания, например, раз, два.

karamba, тут надо подумать, ибо float: right не очень нравится, не возникнет ли разрыва, если фоном, к примеру, класть резанную картинку, может встык не встать. Однопиксельный правый padding у родительского дива, как в примере у Токмакова, тоже не интересное решение. Воспользуюсь первым вариантом. А min-height и min-width в числовом выражении задам для родителя.
Будем кулёмать, спасибо.

R E Y S T L E E N, да, вот, другие решения встречал...
что-то вроде

Код:

#example3,#example4 {
  min-height: 7em;
}
/* hide from IE/mac \*/
* html #example3,* html #example4 {
  height: 9em;
  he\ight: 7em;
}
/* end hide */

а это _ да, все игнорируют, кроме ИЕ, уже нашёл.

Хм... посмотрел сегодня в ИЕ6 (версия 6.0.2900), дома-то ИЕ7, ФФокс -- и нифига оно не работает, увы

Основной див нужную высоту не даёт, вложенные 4 дива тоже. Первые 2 вложенных вроде как ложатся как надо (вниз от верхней границы родительского), вторые 2 тоже (вверх от нижней границы родительского), а в итоге фигня получатеся...

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>the site</title> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" /> 
<style type="text/css" media="Screen"> 
/*\*/@import url("css/master.css");/**/ 
</style 
</head> 
<body> 
<div style="position:absolute;width:90%;height:90%;left:5%;top:5%;border:1px solid black;">

<div style="position:absolute;width:50%;height:50%;left:0;top:0;background-color:yellow;"></div> 
<div style="position:absolute;width:50%;height:50%;right:0;top:0;background-color:blue;"></div> 
<div style="position:absolute;width:50%;height:50%;left:0;bottom:0;background-color:green;"></div> 
<div style="position:absolute;width:50%;height:50%;right:0;bottom:0;background-color:red;"></div>

</div> 

</body> 
</html> 

tentoys, http://slobodyanyuk.com.ua/temp/4divs.html
смотри чем хош, все работает.
Бади высоту не забываем указывать )

karamba, С удовольствием. К сожалению ссылка (и сайт тоже) не досупны.
А body, да, 100%, естественно. Используем в мастер.цсс всеобщий ресет, как, к примеру, у Эрика Мейера

tentoys писал(а):

К сожалению ссылка (и сайт тоже) не досупны.

блин, сервак лёг. Починят — посмотришь )

karamba, OK.
Фиксированное, да с отрицательными margin -- без проблем. Бьюсь за fluid.

Код:

<body>
<div style="position:absolute;left:50%;margin-left:-375px;top:50%;margin-top:-250px;width:750px;height:500px;border:1px solid black;">типа, работает, но жёсткие размеры
</div>
</body>

DeДверь
Логин:
Пароль:
	Автологин