Добрый вечер.
столкнулся с такой проблемой
html
CODE (
html):
скопировать код в буфер обмена
<!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" dir="ltr" lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style/df.css" />
</head>
<body>
<div class="aw-page">
<div class="gb-content">
<div class="bl_left">
<div class="navigation"></div>
<div class="bl"></div>
<div class="dilator"></div>
<div class="down"></div>
</div>
<div class="bl_right">
<div class="menu1"></div>
<div class="bl"></div>
<div class="dilator"></div>
<div class="down"></div>
</div>
<div class="bl_center">
<div class="content_final">
text
</div>
</div>
</div>
</div>
</body>
</html>
css:
CODE (
html):
скопировать код в буфер обмена
html {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 13px;
line-height: 18px;
color: #000;
font-weight: 700;
}
html, body {
margin: 0;
padding: 0;
background-color: #FFF;
}
.aw-page {
width: 925px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.gb-content {
width: 925px;
min-height: 837px;
height: 100%;
}
/* left menu */
.aw-page .bl_left {
float: left;
width: 182px;
height: 100%;
}
.aw-page .bl_left .navigation {
background-image: url("../images/g3_04.jpg");
background-repeat: no-repeat;
width: 182px;
height: 298px;
}
.aw-page .bl_left .bl {
background-image: url("../images/g3_12.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
width: 182px;
height: 376px;
}
.aw-page .bl_left .dilator {
background-image: url("../images/g3_14.jpg");
background-repeat: repeat-y;
width: 182px;
height: 100%;
}
.aw-page .bl_left .down {
background-image: url("../images/g3_18.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
width: 182px;
height: 163px;
}
/* content */
.aw-page .bl_center {
margin-left: 182px;
margin-right: 173px;
width: 570px;
height: 100%;
}
/* right menu */
.aw-page .bl_right {
float: right;
width: 173px;
height: 100%;
}
.aw-page .bl_right .menu1 {
background-image: url("../images/g3_06.jpg");
background-repeat: no-repeat;
width: 173px;
height: 298px;
}
.aw-page .bl_right .bl {
background-image: url("../images/g3_13.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
width: 173px;
height: 376px;
}
.aw-page .bl_right .dilator {
background-image: url("../images/g3_15.jpg");
background-repeat: repeat-y;
width: 173px;
height: 100%;
}
.aw-page .bl_right .down {
background-image: url("../images/g3_19.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
width: 173px;
height: 163px;
}
вся проблема в том, что при расширении контента должен розширяться левый и правый блок, но этого не происходит =( и вот не знаю почему =(
<div class="gb-content"> - height 100%
<div class="bl_left"> - height 100%
тоисть если блок <div class="gb-content"> разширится то и <div class="bl_left"> должен... но почему то не хочет =(
<div class="navigation"></div> - статичиский height и width
<div class="bl"></div> - статичиский height и width
<div class="dilator"></div> - статичиский width НО height 100%
<div class="down"></div> - статичиский height и width
тоисть когда когда будет расширяться <div class="gb-content"> он должен тянуть за собой и <div class="bl_left"> ну а когда и этот блок расширится то блок <div class="dilator"></div> раздвинется
кто что может посоветовать ?