frol
-
Posts
2 -
Joined
-
Last visited
frol's Achievements
Explorer (1/14)
0
Reputation
-
то есть без явного указания ширины не обойтись?
-
Такой я человек, что всегда пытаюсь решить проблему самостоятельно, не надеясь на окружающих... Но не в этот раз, вынудили таки мягкотелые обратиться к народу. Имеется трабл с width: 100%. Вот пара скринов: Дочерний блок Родительский. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="templates/css/reset.css" type="text/css" /> <link rel="stylesheet" href="templates/css/main.css" type="text/css" /> <script src="/templates/js/jquery-1.3.2.js" type="text/javascript"></script> <script src="/templates/js/dropmenu.js" type="text/javascript"></script> <script src="/templates/js/jquery.timers.js" type="text/javascript"></script> <script type="text/javascript"> </script> <title></title> </head> <body> <div class="page"> <div class="topmenuleftwrapper"> <div class="topmenuleft"></div> <div class="topmenucenter"> <ul> <li> <a href="#" title="О нас">О нас</a></li> <li> <a href="#" title="Жителям">Жителям</a> <ul> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a> <ul> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a> <ul> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a></li> </ul> </li> <li> <a href="#" title="ПодразделПодразделПодразделПодразделПодраздел">ПодразделПодразделПодразделПодразделПодраздел</a> <ul> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a></li> <li> <a href="#" title="Подраздел">Подраздел</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#" title="Корпоративным клиентам">Корпоративным клиентам</a></li> </ul> </div> <div class="topmenuright"></div> </div> <div class="topmenurightwrapper"> <div class="topmenuleft"></div> <div class="topmenucenter"> <ul> <li> <form action="#"> <input type="text" id="search" value="Поиск" /> <input type="button" id="srch" value="↵"></input> </form> </li> <li> <a href="#" title="s">s</a></li> <li> <a href="#" title="f">f</a></li> <li> <a href="#" title="g">g</a></li> </ul> </div> <div class="topmenuright"></div> </div> <div class="clear"></div> <div class="header"> <div class="mainback"> <div class="logo"></div> </div> </div> <div class="largebox"><span class="warning">Under construction<br /> Сайт находится в разработке</span></div> <div class="box">С наступлением жарких дней Мосводоканалом зафиксировано увеличение водопотребления в мегаполисе до 3 млн. 600 тыс. куб/м. Вчера, 13 июля, москвичи использовали, выпили и вылили на себя в душе на 100 тыс. кубометров больше, чем в обычные дни. Пик разбора воды пришелся на 23.00. </div> <div class="box">В сравнении с последними годами рекордным этот объем воды не назовешь: водопотребление в столице с каждым годом уменьшается. Только за первое полугодие 2009-го снижение объемов производства воды достигло 6,5%. Нынешним летом средний уровень составляет 3 млн. 500 тыс. куб/м в стуки или 270 литров на человека в сутки. Свою лепту вносят и летние месяцы, когда многие москвичи покидают городские квартиры, уезжая на подмосковные дачи и отправляясь в отпуска. </div> <div class="box">Но в качестве основных причин, повлиявших на снижение водопотребления в столице, специалисты предприятия называют спад промышленного производства и повсеместную установку общедомовых и квартирных счетчиков, которые заставляют москвичей экономить воду. Однако жизнь показывает - в жару не до экономии! Кстати, 14 июля прошлого года было таким же жарким днем, и москвичи тогда поставили рекорд, «выпив» 3 млн. 972 тыс. куб/м. </div> <div class="footer_guarantor"></div> </div> <div class="footer"> <div class="footbox"> <ul> <li>Авторизация</li> <li><a href="#" title="Вход">Вход</a></li> <li><a href="#" title="Вход">Регистрация</a></li> </ul> </div> <div class="footbox"> <ul> <li>Разделы</li> <li><a href="#" title="Управление многоквартирными домами">Управление многоквартирными домами</a></li> <li><a href="#" title="Техническая эксплуатация жилых домов">Техническая эксплуатация жилых домов</a></li> <li><a href="#" title="Ремонт и отделка">Ремонт и отделка</a></li> <li><a href="#" title="Эксплуатация коллекторов и водостоков">Эксплуатация коллекторов и водостоков</a></li> <li><a href="#" title="Цены на платные услуги населению">Цены на платные услуги населению</a></li> </ul> </div> <div class="footbox"> <ul> <li>Инфо</li> <li><a href="#" title="О компании">О компании</a></li> <li><a href="#" title="Контакты">Контакты</a></li> <li><a href="#" title="О сайте">О сайте</a></li> <li><a href="#" title="Соглашение">Соглашение</a></li> </ul> </div> </div> </body> </html> CSS: html { /*———— 100% высота контейнера div.page далее */ height: 100%; /*————*/ background: #fff; } body { /*————— 100% высота контейнера div.page далее */ min-height:100%; height: 100%; /*—————*/ background: #fff; color: #000; font-weight: normal; font-family: Arial, Verdana, Helvetica, Sans-Serif; } A{ } input{ font-size:0.75em; background-color:#f1f1f1; border:none; } input#srch{ height:19px; width:20px; border:1px solid #d7d7d7; border-bottom:1px solid #333333; border-right:1px solid #333333; } input#search{ width:8em; } /* Контейнер всего содержимого кроме подвала */ div.page { background: url('img/head_grad.png') repeat-x; width: 908px; margin: auto; /*———————-- 100% высоты контейнера относительно клиентской области и контента для IE, FF, Opera */ height: auto !important; min-height:100%; height: 100%; /*———————--*/ border-right:solid 1px gray; border-left:solid 1px gray; } /* блок гарантирующий, что область на коотрую накладывается div.footer в div.page останется пустой, */ /* наличие этого блока устанавливает высоту div.page 100% относительно клиентской области и контента в FF, Opera */ div.page div.footer_guarantor { clear:both; height: 180px; } /* Контейнер подвала */ div.footer { margin: auto; margin-top: -180px; width: 908px; height: 180px; background: url('img/foot_grad.png') repeat-x; border-right:solid 1px gray; border-left:solid 1px gray; } /* Контейнер шапки */ div.page div.header { height: 247px; } /* Патч для установки минимальной высоты в IE */ div.page div.patch_minheight { width: 1px; height: 250px; float: right; } /* Контейнер основной полосы */ div.page div.mainbar { width: 908px; overflow: hidden; background: #fff; } .topmenuleftwrapper, .topmenurightwrapper, .topmenuleft, .topmenuright, .topmenucenter{ z-index:20; color:white; font-size: 1em; } div.topmenuleftwrapper, div.topmenurightwrapper{ margin-left:15px; margin-right:15px; } div.topmenurightwrapper{ float:right; } div.topmenuleft, div.topmenuright { width:18px; height:34px; float:left; } div.topmenuright{ background:url('img/topmenu_right.png'); } div.topmenuleft{ background:url('img/topmenu_left.png'); } div.topmenucenter{ background:url('img/topmenu_center.png') repeat-x; height:34px; float:left; background-color:gray; } div.topmenucenter ul{ display:block; } div.topmenucenter ul li{ padding-top:4px; float:left; padding-right:5px; padding-left:5px; position:relative; display: inline; z-index: 20; } div.topmenucenter ul li a{ font-size:0.85em; color:white; display:block; height:20px; text-decoration:none; z-index: 20; width: 100% } div.topmenucenter ul li ul{ position:absolute; display:none; z-index: 20; } div.topmenucenter ul li ul li{ width:100%; display: block; float: none; background:url('img/topmenu_center.png') repeat-x; border-left:1px solid #d7d7d7; border-top:1px solid #d7d7d7; border-bottom:1px solid #333333; border-right:1px solid #333333; right:5px; font-size:0.95em; height:17px; } div.topmenucenter ul li ul li:hover{ width:100%; } div.topmenucenter ul li:hover{ background:url(img/topmenu_center_hover.png); display:block; } div.topmenucenter ul li ul li ul{ top:0; } div.logo{ background:url('img/3sm_logo.png'); width:253px; height:247px; margin:0 auto; } div.mainback{ background:url('img/mainback.jpg'); width:908px; height:236px; } div.slides{ float:right; margin-right:15px; } div.box, div.middlebox, div.largebox{ background:white; padding:15px; width:252px; margin:15px 0px 15px 15px; float:left; } div.middlebox{ width:551px; } div.largebox{ width:848px; } div.footbox{ padding:15px; margin-right:80px; font-size:0.85em; line-height: 1.5; color:gray; float:right; } div.footbox A{ color:#336699; font-size:0.9em; } span.warning{ color:orange; font-size:3em; text-align:justify; } .clear{ clear:both; } Вопрос: и какого х*я, Валера? =). Почему же блок не растягивается на 100% по правилам css? Заранее спасибо за помощь.