Форум

Flashton · #1 (**permalink**) 19.03.2010, 20:23

Пытаюсь сделать шаблон для сайта. Нужно сделать так что бы блок "B" по правому краю обтекал блок "С", свойство float:left, для блока "B" указал, а всё равно, обтекания не происходит, пробовал указывать display: inline и inline-block, тоже самое, желаемого результата это не дало.
Желаемая схема такая:
Блок "A"
Блок "B" Блок "C"
Блок "D"
Моя страничка: http://antton120.narod.ru/SP/index.html
Кто знает подскажите пожалуйста, что здесь не так?
CSS:

Код:

body, html 
{
width:720px;
margin:4px;
padding:0px;
background-image: url(../Images/Slujebnie/121.jpg);
background-repeat: repeat;
}

#container_ohvat
{
valign:top;
min-width:500px;
width:expression(
(document.compatMode && document.compatMode == 'CSSI1Compat')
?
(
document.documentElement.clientWidth < 500
?
"500px"
:
"auto"
)
:
(
document.body.clientWidth < 500
?
"500px"
:
"auto"
)
);
margin:0;
text-align:left;
}

#ogranichitel
{
width:auto;
height:inherit;
margin-top:10px;
clear:both;
}

#verh_p
{
z-index:0;
background-color:#CCCCCC;
width:inherit;
height:28px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

#content
{
z-index:2;
float:left;
background-color:#006666;
width:200px;
height:auto;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

#menu_u
{
z-index:1;
background-color:#CC9933;
width:200px;
height:auto;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

#niz_p
{
z-index:0;
background-color:#FFFF66;
width:inherit;
height:31px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

HTML:

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container_ohvat">

<div id="verh_p">
A
</div>

<div id="ogranichitel"></div>

<div id="content">
B
</div>

<div id="menu_u">
C
</div>

<div id="ogranichitel"></div>

<div id="niz_p">
D
</div>

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

-----------------------------------
С уважением, Антон.

kibal4iw · #2 (**permalink**) 26.03.2010, 18:08

Я блоки поменял местами

<div id="menu_u">C</div>
    <div id="content">B </div>

И добавил недостающее обтекание у одного из блоков, увеличил ширину, чтобы ты увидел, вобщем разберешься. Для компактности сократил код

#content, #menu_u {
    width: 50%;
} 
#content {
    float:left;
}

#menu_u{
    float: right;
}

Skipp · #3 (**permalink**) 30.03.2010, 16:28

Используй таблицы и не мучай себе мозг=)

Skipp · #4 (**permalink**) 30.03.2010, 16:32

А еще надо было для блока B не left указывать а right, а так же эти блоки должны быть общим размером не больше ширины экрана, желательно чуть меньше, если будет больше то, левый блок перекинет на следующую строку, так сказать.

subzey · #5 (**permalink**) 30.03.2010, 19:36

Skipp,
браузеры округляют дробные значения пикселей в меньшую сторону.

<style type="text/css">
.carrier {width: 100px; background: red; height: 100px;}
.floater {float:left; width: 33.9%; background: blue; height: 100px} /* 33.9 × 3 = 101.7
</style>
<div class="carrier">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<!-- 99 px -->
</div>

Aetae · #6 (**permalink**) 30.03.2010, 21:47

ФФ ничего не округляет)) (точней округляет но после вычислений, а не до)
А простейшее решение засунуть B в C(или наоборот). Если нужны какие-нить заморочки с шириной - внешнему добавить margin +, а внутреннему margin - .

subzey · #7 (**permalink**) 30.03.2010, 23:43

Сообщение от Aetae

ФФ ничего не округляет

Кс-со! Я фатально ошибся.

Форум

Справочник

Discord чат

Курсы javascript