Горизонтальное выравнивание блока между двумя абсолютно позиционируемыми блоками

Belovsan · August 3, 2010

Есть такой расклад. По краям идёт два блока абсолютно позиционируемые. Можно ли средний блок отцентрировать относительно этих блоков без использования атрибута float для этих крайних блоков? То есть, если крайние блоки зафлочены, то мы можем выровнять средний блок с помощью overflow:hidden, а если они абсолютно позиционируемые?

Пример кода CSS:

#header {position:relative; height:200px;}

#telo {width:100%;  height:150px; background:#00FF33; position:absolute;}

#blok1 {width:100px; height:80px; border: 1px solid #000000; position:absolute; top:20px; left:30px;}

#blok2 {width:250px; height:15px; border: 1px solid #000000; position:absolute; top:20px; right:30px;}


#blok3 {width:250px; height:100px; border: 1px solid #000000; margin:0 auto;}

Код html:

<body>

<div id="header">

<div id="telo">

<div id="blok1"></div>

<div id="blok2"></div>

<div id="blok3"></div>
</div>

</div>

</body>

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

Edited August 3, 2010 by Belovsan

npofopr · August 3, 2010

на то оно и абсолютное позиционирование, чтобы ни от кого не зависеть. или я путаю

psywalker · August 3, 2010

При позиционировании элемент выпадает из потока, поэтому можно сделать только следующее:

Разместить боковые колонки абсолютом по бокам, а блок, который по середине, ему просто задать margin: 0 ширина боковых колонок;

Belovsan · August 4, 2010

При позиционировании элемент выпадает из потока, поэтому можно сделать только следующее:
Разместить боковые колонки абсолютом по бокам, а блок, который по середине, ему просто задать margin: 0 ширина боковых колонок;

Принцип понятен. Спасибо, большое )

Edited August 4, 2010 by Belovsan

psywalker · August 4, 2010

Принцип понятен. Спасибо, большое )

Не за что, главное, что ты понял.

Sign In

Горизонтальное выравнивание блока между двумя абсолютно позиционируемыми блоками

Question

Belovsan

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Belovsan

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information