Вёрстка растягивающегося div'а

MN
На сайте с 10.02.2009
Offline
11
604

Народ, помогите, ща сдохну, задолбался. Нужно сверстать, прикреплено. 1,3,4,5 - фиксированных размеров, 2,5 - растягиваются.

Максимум, что осилил:

<div style="position:relative;height:500px;border: 1px solid #FF0000;">

<div style="height:100%;position:absolute;width:20px;border: 1px solid #FF0000;float:left;">
<div style="height:20px;width:20px;border: 1px solid #FF0000">1</div>
<div style="width:20px;top:20px;position:absolute;bottom:20px;border: 1px solid #FF0000">2</div>
<div style="height:20px;width:20px;position:absolute;bottom:0px;border: 1px solid #FF0000">3</div>
</div>
<div style="height:100%;position:absolute;left:20px;right:20px;border: 1px solid #FF0000;float:left;">asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/>asfdsdafxzc<br/></div>
<div style="height:100%;position:absolute;width:20px;right:0px;border: 1px solid #FF0000">
<div style="height:20px;width:20px;border: 1px solid #FF0000">4</div>
<div style="width:20px;top:20px;position:absolute;bottom:20px;border: 1px solid #FF0000">5</div>
<div style="height:20px;width:20px;position:absolute;bottom:0px;border: 1px solid #FF0000">6</div>
</div>
</div>

И всё отлично, но если главному диву не задать высоту, или задать 100%, правая и левая колонки не растягиваются.

gif primer.gif
KeTal
На сайте с 25.08.2005
Offline
54
#1
Qinghua
На сайте с 01.09.2009
Offline
103
#2

я бы через флоаты делал (левая правая флоат, центр с марджинами по краям)

помню тоже боролся с высотой при абсолютной вёрстке. потом полностью на флоаты перешел.

[Удален]
#3

Да через float самое оно. только не забывай про IE. Он ска всегда интерпритирует по другому, так что когда будешь делать - не забудь подогнать под него. Для подгонки обычно создается новая таблица стилей!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий