| |
 24.7 Кб |
|
| | Вопрос гениям вёрстки ;-)
Вот такой макет имею (в аттаче)
Примерная структура такая:
<div class="left-col">
<div class="content">
Основной контент
</div>
</div>
<div class="right-col">
<div class="rb-1">
Первый блок в правой колонке
</div>
<div class="rb-2">
Второй блок в правой колонке
</div>
</div>
|
left-col и right-col имеют float:left;
Загвоздка в том что в правой и левой колонке контент может иметь разную длину и поэтому одна из колонок получается длиннее. А в другой образуется пустота.
Нужно сделать так чтобы последний блок в колонке растягивался до нижней границы родителя.
В данном случае блок 3 должен растянуться до нижней границы правой колонки.
Как это сделать? | |
| |
|
|
| |
|
|
| |
для: Axxil
(27.08.2008 в 15:55)
| | | >Как это сделать?
Вам надо просто побороть свою гордыню и вместо трех дивов с малопонятными вам свойствами стилей использовать одну таблицу из двух строк (где первому тегу <TD> прописать атрибут ROWSPAN="2")
*Внимательно прочтите | |
| |
|
|
| |
|
|
| |
для: PAT
(27.08.2008 в 16:33)
| | | >Вам надо просто побороть свою гордыню
А неужели это правда, что если разработчик обходится DIV'ами, без использования таблиц, то это говорит о его высокой квалификации? | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(27.08.2008 в 16:52)
| | | Именно так.
Так как верстать divами гораздо сложнее чем тупо лепить нагромождения из таблиц | |
| |
|
|
| |
|
|
| |
для: PAT
(27.08.2008 в 16:33)
| | | Мне пофиг на гордыню, я не верстальщик и в конкурсах не учавствую.
Но и таблицами верстать давно перестал, так как чисто психологически div веселее.
По сути как контейнеры, div и td мало чем отличаются.
А вопрос в том, как последний блок в потоке внутри родительского контейнера (неважно td или div) растянуть до нижнего края родителя | |
| |
|
|
| |
|
|
| |
для: Axxil
(27.08.2008 в 16:57)
| | | Честно говоря лень представлять что там у вас да как..
Может это вам поможет, быстренько накидал. Надеюсь смысл поймёте.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, html {
background-color:#FFCCFF;
margin:0;
padding:0;
height:100%;
width:100%;
}
.zzz {
background-color: #99CCFF;
margin:auto;
padding:0;
height:400px;
width:80%;
}
.xxx {
background-color: #FFFF99;
margin:auto;
padding:0;
height:100%;
width:200px;
}
-->
</style>
</head>
<body>
<div class="zzz">
<div class="xxx">fsfsgsgs</div>
</div>
</body>
</html>
|
Ещё вот тут http://www.dynamicdrive.com/style/layouts/category/C10/ посмотрите, может что нароете. | |
| |
|
|
