Curly-fingers
NULL
Здравствуйте.
Моя задача: есть готовая верстка на таблицах, а нужно переверстать на дивах.
Оформление сайта основано на визуальных блоках, которые состоят из таблицы с ячейками 3х3. Эта таблица создает эффект скругленных углов, а сам контент находиться в ячейке 2х2. По мере наполнения контентом ячейки, остальные (вертикальные 2х1 и 2х3) растягиваются по вертикали вместе с контентом. В случае с дивами, на плавающий див слева и справа от контента не растягивается относительно контента даже если min-height: 100%, т.к. реальная высота родительского дива неизвестна. Надеюсь понятно описал.
Да и еще пробовал вариант с display: table, -cell, -row, получается не кроссбраузерно.
Если есть идеи как растянуть вертикально див, поделитесь пожалуйста.
Во вложении изображение как сейчас сделано.
Моя задача: есть готовая верстка на таблицах, а нужно переверстать на дивах.
Оформление сайта основано на визуальных блоках, которые состоят из таблицы с ячейками 3х3. Эта таблица создает эффект скругленных углов, а сам контент находиться в ячейке 2х2. По мере наполнения контентом ячейки, остальные (вертикальные 2х1 и 2х3) растягиваются по вертикали вместе с контентом. В случае с дивами, на плавающий див слева и справа от контента не растягивается относительно контента даже если min-height: 100%, т.к. реальная высота родительского дива неизвестна. Надеюсь понятно описал.
Да и еще пробовал вариант с display: table, -cell, -row, получается не кроссбраузерно.
Если есть идеи как растянуть вертикально див, поделитесь пожалуйста.
Во вложении изображение как сейчас сделано.
Код:
<!-- реализация на div -->
<div id="topheader">
<div class="top" style="clear: both;">
<div style="width: 20px; height: 20px; float: left;"></div>
<div style="width: 940px; height: 20px; float: left;"></div>
<div style="width: 20px; height: 20px; float: left;"></div>
</div>
<div class="middle" style="clear: both;">
<div style="width: 20px; height: 100%; float: left; background-color: #F00;"></div>
<div style="width: 934px; min-height: 100%; height: 100%; background-color: #333; float: left; margin: 3px;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="width: 20px; height: 100%; float: left; background-color: #F00;"></div>
</div>
<div class="bottom" style="clear: both;">
<div style="width: 20px; height: 20px; float: left;"></div>
<div style="width: 940px; height: 20px; float: left;"></div>
<div style="width: 20px; height: 20px; float: left;"></div>
</div>
</div>
Вложения
-
15,7 KB Просмотры: 5