Kostya Romantikov (fotoromantik) wrote in ru_css,
Kostya Romantikov
fotoromantik
ru_css

Плавающий блок слишком активно плавает

Ребята, спасайте :) Мозг взорвался и я чувствую, что туплю в чем то элементарном, но от этого ешение не находится не смотря ни на какое загугливание ... думал сформирую вопрос вам и найду, по ходу, ответ, но нет - даже в примитивном примере проблема повторяется. Вот пример:
 

<html>
<body>
<div style="position:relative;left:50%;margin-left:-300px;width:600px;height:600px;border: solid 1px #CCCCCC;">
<div style="position:relative;left:0px;width:100px;height:400px;border: solid 1px #CCCCCC;float:left;">Left bar</div>
<div style="position:relative;right:0px;width:100px;height:400px;border: solid 1px #CCCCCC;float:right;">Right bar</div>

<p style="text-align:center;">top-line</p>

<div style="border: solid 1px #BBBBBB;color:#000000;background-color:#EEEEEE;position:relative;width:180px;height:170px;overflow: hidden;padding-top:2px;padding-bottom:2px;padding-left:4px;padding-right:4px;float:left;">
Data bar
</div>

<p style="text-align:center;">bottom-line</p>
</div>
</body>
</html>
 
Что надо: блок по средине экрана. Поделен на 3 части - левые и правые блоки, плюс - основная область для вывода контента. В основную область выводятся плавающие блоки Data bar. Перед ними выводится top-line, отцентрированная. Под ними точно такая же bottom-line.

Что есть: если плавающих блоков четное количество - то все хорошо, все как надо. Если же нет - то bottom-line выводится справа от последнего плавающего блока, отцентрированная по пустому месту. Не хорошо. Плохо. Будьте друзьями, окажите услугу, подскажите где та грабля, на которую я наступил и хорошенько на ней попрыгал? Заранее огромное спасибо!

P.S.: Пробовал нижней линии задавать свойство clear:both что бы отменить обтекание, но тогда она выводится посредине, но уже сильно ниже, под боковыми блоками Left bar и Right bar.

P.P.S.: Пока писал все это придумал - может у меня просто проблема с концепцией? Если вынести Left bar и Right bar за пределы родительского блока - проблема будет решена с использованием clear:both ... но единственное ли это решение?

UPD: В общем да, проблема была в неправильном проектировании :) Сделал как написал в PPS - все получилось с использованием clear:both. Вопрос снят, прошу простит за беспокойство :)
  • Post a new comment

    Error

    default userpic
  • 2 comments