расположение div - есть ответ « Вопросы и ответы

Oliver Varnce, 201 просмотр

Народ! помогите сверстать страницу.
Есть страница. на дивах. Нужно расположить дивы так, чтобы три дива были в ряд четвертый внизу на всю ширину в родительском диве. Хедер лег как надо левый див лег как надо. а правый не хочет. Есть один нюанс, дивы сделаны с тенью. тоесть создан один див, в нем еще три дива. в каждом из этих дивов внутри еще по три дива: верхняя тень во всю ширину дива, тень средины которая растягивается и нижняя тень в всю ширину дива.

кто шарит, подскажите. Единственная проблемма, что правый див никак не хочет прилипнуть к правому краю родителя. и при этом центральный див опускается вниз

Примечание:
вот верстка:
<!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" />
<link href="/{LANG}/x/forms.css" rel="stylesheet" type="text/css" />
<link href="/{LANG}/x/typo.css" rel="stylesheet" type="text/css" />


<meta name="keywords" http-equiv="keywords" content="{KEYWORDS}" />
<meta name="description" http-equiv="description" content="{DESCRIPTION}" />
<link href="../ua/styles/common.css" rel="stylesheet" type="text/css" />
<title>{TITLE}</title>
</head>

<body>
<div class="page">
<div class="header">
<div>
<embed type="application/x-shockwave-flash" width="1001" height="141" src="../{LANG}/images/header.swf" quality="best" wmode="Window" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</div>
<div class="header-d">
<div id="left-board"><img src="/{LANG}/images/1.png"></div>
<div id="center-board"><img src="/{LANG}/images/2.png"></div>
</div>
</div>
<div class="pager">
<div class="leftside">
<div class="lsidesh">{LEFTMENU} </div>
<div class="lshadowtop">&nbsp </div>
<div class="lshadowcenter">&nbsp </div>
<div class="lshadowbottom">&nbsp </div>

<div style="margin-top: 25px;"><img src="/{LANG}/images/banner.jpg"></div>
</div>

<div class"rssh">
<div class="rssh_1">  </div>
<div class="rssh_2"></div>
<div class="rssh_3">  </div>
</div>

<div class="search"><div id="sForm">{SEARCHBLOCK}</div>

<div class"contsh">
<div class="contsh_1">  </div>
<div class="contsh_2"><div class="content">{CONTENT}</div> </div>
<div class="contsh_3">  </div>
</div>

<div class="footer">
<div class="footlogo"><img src="/ua/images/foot_logo.png" /></div>
<div class="footerinfo">

<p>Наши услуги: покупка / продажа / аренда недвижимости .

</div>
<div class="fshadowtop">&nbsp </div>
<div class="fshadowcenter">&nbsp </div>
<div class="fshadowbottom">&nbsp </div>

</div>
</div>
</body>
</html>

Примечание:
вот стили:
a{
color: #9c2616;
}
a:hover{
text-decoration: none
}
body{
min-width: 1001px;
height:auto;
color: #050505;
font: 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
background:url(/ua/images/bcg.png) repeat;
}
em{
font-style: italic
}
h1{
margin: 10px;
color: #971a09;
font-size: 24px;
line-height: 28px;
text-align: center
}
h2{
color: #8a8a8a;
font-size: 18px;
text-align: center;
text-transform: uppercase;
margin-bottom: 5px;
}
h3{
color: #000;
font-size: 18px;
text-align: center;
margin-bottom: 5px;
}
a.togglable{
color: #8a8a8a;
border-bottom: 1px dashed #8a8a8a;
text-decoration: none;
}
ol li{
margin: 0px 30px;
}
ol.decimal li{
list-style-type: decimal
}
ol.roman li{
list-style-type: upper-roman
}
p{
margin-bottom: 7px;
}
strong{
font-weight: bold
}
table{
}
table td{
}
table th{
}
ul li{
margin: 0px 30px 5px 30px;
}
ul, ol{
margin: 0 0 5px 0
}
ul li{
list-style-type: disc;
list-style-image: url(/ua/images/ul.jpg)
}
ul.disc li{
list-style-image: none;
list-style-type: disc
}
ul.circle li{
list-style-image: none;
list-style-type: circle
}
ul.square li{
list-style-type: square
}
.header {
margin: 0px;

}

#left-board {
float:left;
width: 190px;
heigh: 26px;
background:url(/ua/images/1.png) no-repeat;
}
#center-board {
float:left;
width: 811px;
heigh: 26px;
background:url(/ua/images/2.png) repeat-x;
}

.page { display:block; margin-left: auto; margin-right: auto; text-align: left; width: 1001px; padding: 0px; }
.header-d {
width: 1001px;
height: 26px;
height: 26px;

}
.pager {
width: 100%;
height: 100%;
padding-top:20px;
}

.search {
float:left
padding-left: 230px;
margin-bottom: 10px;
margin-left: 250px;
width: 550px;

}
.s_head {
width: 210px;
height: 26px;
}

.leftside {
float:left;
padding-left: 0px;
height: 800px;
width: 240px;

}

.leftmenu {
/*background:#FFF;*/
/*border: 2px #999 solid;*/
margin-top: 10px;
padding-bottom: 5px;
}

Примечание:
.content {
float:left
padding-left: 230px;
padding-top: 10px;
margin-left: 25px;
width: 478px;
min-height: 565px;
}

/*.rightside {
float: right;
right: 0px;
height: 800px;
width: 184px;*/

}
.footer {
/*padding-bottom:100%;*/
bottom: 10px;
width:1001px;
height: 120px;
/*border: 2px #999 solid;*/
}

.footlogo {
float:left;
margin:10px 0px 0px 20px;
widh:10px;
height:10px;
}
.footerinfo {
margin-left: 30px;
margin-top: 10px;
float:left;
height:100px;
width: 600px;
}

/*футер*/
.fshadowtop {
z-index: -1;
height: 6px;
width: 1001px;
background: url(/ua/images/sh1.png) no-repeat;
}
.fshadowcenter {
z-index: -1;
height: 130px;
width: 1001px;
background: url(/ua/images/sh2.png) repeat-y;
}
.fshadowbottom {
z-index: -1;
height: 6px;
width: 1001px;
background: url(/ua/images/sh3.png)no-repeat;
}

/*меню слева*/
.lsidesh {
float:left;
padding-left: 0px;
min-height: 215px;
width: 240px;
}

.lshadowtop {
z-index: -2;
height: 6px;
width: 240px;
background: url(/ua/images/lmenu_sh__1.png) no-repeat;
}
.lshadowcenter {
z-index: -2;
min-height: 200px;
width: 240px;
background: url(/ua/images/lmenu_sh__2.png) repeat-y;
}
.lshadowbottom {
z-index: -2;
height: 6px;
width: 240px;
background: url(/ua/images/lmenu_sh__3.png)no-repeat;
}

/*контент*/
.contsh {
float:left
padding-left: 230px;
margin-bottom: 10px;
margin-left: 230px;
width: 550px;
min-height: 545px;

}
.contsh_1 {
margin-left: 245px;
z-index: -2;
height: 6px;
width: 550px;
background: url(/ua/images/contsh__1.png)no-repeat;
}
.contsh_2 {
margin-left: 245px;
z-index: -2;
min-height: 550px;
width: 550px;
background: url(/ua/images/contsh__2.png)repeat-y;
}
.contsh_3 {
margin-left: 245px;
z-index: -2;
height: 6px;
width: 550px;
background: url(/ua/images/contsh__3.png) no-repeat;
}

.rssh {
float: right;
right: 0px;
height: 800px;
width: 184px;

}

.rssh_1 {
background-position: top; float: right; overflow: hidden;
display:inline block;
float: right;
z-index: -3;
margin-right: 0px;
height: 6px;
width: 184px;
background: url(/ua/images/rssh__1.png)no-repeat;
}
.rssh_2 {
display:inline block;
z-index: -3;
margin-right: 0px;
height: 788px;
width: 184px;
background: url(/ua/images/rssh__2.png)repeat-y;
}
.rssh_3 {
display:inline block;
z-index: -2;
margin-right: 0px;
height: 6px;
width: 184px;
background: url(/ua/images/rssh__3.png) no-repeat;
}

Примечание:
Дело в том, что этот параметр еще не кроссбраузерный, испытано уже. IE 6 и 7 их не могут пережевать и на странице получается белеберда. было принято решение сделать именно простым способом, хоть и объемным довольно.

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.