пОзиционирование в шаблоне.

[htmlonline]

Я занимаюсь версткой шаблона, но не совсем понимаю одну вещь.

Я задал в ксс:

div.header {margin-top:0%; height:20%}
div.rightcolumn {margin-right:0%;                                 margin-top:20%;width:20%}
div.content {margin-top:20%; margin-right:20%;width:60%}
div.leftcolumn{margin-left:0%;margin-top:20%;
width:20%}

Это в body вставил:

<div class="header">
</div>
<div class="leftcolumn">
</div>
<div class="content">
</div>
<div class="rightcolumn">
</div>

Но почему то все блоки друг под другом выставляются.

Подскажите в чем проблема?

Edited January 18, 2011 by htmlonline

[psywalker]

Я занимаюсь версткой шаблона, но не совсем понимаю одну вещь.

Я задал в ксс:

div.header {margin-top:0%; height:20%}

div.rightcolumn {margin-right:0%; margin-top:20%;width:20%}

div.content {margin-top:20%; margin-right:20%;width:60%}

div.leftcolumn{margin-left:0%;margin-top:20%;

width:20%}

Это в body вставил:

<div class="header">

</div>

<div class="leftcolumn">

</div>

<div class="content">

</div>

<div class="rightcolumn">

</div>

Но почему то все блоки друг под другом выставляются.

Подскажите в чем проблема?

А почему ты решил, что они должны располагаться по другому?

[Vlad]

Для начала решите, что такое 20%. Двадцать процентов от чего должно вычисляться? По умолчанию высота auto, вот и считайте, сколько будет auto*0.2.

[htmlonline]

Для начала решите, что такое 20%. Двадцать процентов от чего должно вычисляться? По умолчанию высота auto, вот и считайте, сколько будет auto*0.2.

Мне нужно чтобы вычислялось от ширины окна броузера.

А почему ты решил, что они должны располагаться по другому?

Я ведь маргины задал...

Вроде они должны идти друг за другом.

Хедер сверху и три блока под ним друг за другом, я ведь проценты даже рассчитал и позиционировал их...

Edited January 18, 2011 by htmlonline

[Vlad]

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

[htmlonline]

А как я должен рассчитать с процентами? Я ведь делаю резиновый шаблон...

Я не совсем понял, а почему в маргинах проценты считаются не так как в остальном? Я могу задать отрицательные проценты, чтобы блок пододвинулся выше пэрента? И еще вопрос: у моих блоков вроде нету родителей, или родителями считаются блоки описанные выше?

Edited January 18, 2011 by htmlonline

[psywalker]

А как я должен рассчитать с процентами? Я ведь делаю резиновый шаблон...

Я не совсем понял, а почему в маргинах проценты считаются не так как в остальном? Я могу задать отрицательные проценты, чтобы блок пододвинулся выше пэрента? И еще вопрос: у моих блоков вроде нету родителей, или родителями считаются блоки описанные выше?

Родитель - это контейнер, в котором находится твой элемент. У тебя родитель твоих дивов - body и т.д.

Да, и не забудь, что margin-top:20% отсчитывается от Ширины родителя, а не от его Высоты. Но пока в это не вникай, ещё рановато, просто имей ввиду.

[htmlonline]

Можно было выделить блок из потока float - ом. Вот и все, что меня интересовало.