-
Есть такой пример:
Код:
<html>
<head>
<style>
body {
****margin: 0px;
}
#main {
****background: #c0c0c0;
****height: 100%;
}
#temp {
****height: 50px;
****width: 2000px;
****background: gray;
}
</style>
</head>
<body>
<div id="main"><div id="temp"></div></div>
</body>
</html>
Вопрос: почему ширина #main остается равной ширине окна, а не "растягивается", становясь равной ширине дочернего #temp? И каким образом заставить #main увеличить ширину, даже если его контент шире окна?
Спасибо.
P.S. В IE #main растягивается согласно контенту. Кстати, почему?
-
Цитата:
Originally posted by Kiosuki@Feb 13 2008, 13:36
почему ширина #main остается равной ширине окна, а не "растягивается", становясь равной ширине дочернего #temp?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Потому что не должна. Любой блок в прямом потоке, если ему не задана явная ширина, занимает по ширине все доступное ему пространство, предоставленное ему родительским элементом. В данном случае родительским элементом выступает body, ширина которого равна ширине элемента html (ширине окна браузера).
Цитата:
Originally posted by Kiosuki@Feb 13 2008, 13:36
И каким образом заставить #main увеличить ширину, даже если его контент шире окна?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Поскольку ширина блоков в прямом потоке ни коим образом не зависит от контента этих блоков, для прямого потока сделать это можно только одним способом: задать необходимую ширину либо самому блоку #main, либо одному из его родительских элементов. Еще как вариант можно рассматривать назначение блоку #main либо float: left, либо position: absolute. Абсолютно спозиционированные блоки, а также блоки, к которым применено свойство float, перестают занимать по ширине все доступное пространство. Их ширина определяется именно их содержимым...
Цитата:
Originally posted by Kiosuki@Feb 13 2008, 13:36
P.S. В IE #main растягивается согласно контенту. Кстати, почему?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Потому что это IE, который не лезет ни в какие рамки стандартов...
-
