Почему происходит переполнение?

Я изменил мой вопрос, потому что я сузил причину проблемы:Почему происходит переполнение?

<div id="wrapper" class="centrDiv clearfix"> 
      <div id="LEFT-CONTAINER"> 
       <div id="logo" class="centrSlik"> 
        <img src="wheel.gif"/> 
       </div> 
       <div id="podmeni"> 
        <ul><li><a>whatever</a></li></ul> 
        ... 
       </div> 
      </div> 

      <div id="RIGHT-CONTAINER"> 
      <div id="meni"> 
       <ul> 
        <li><a href='whatever'>whatever</a></li> 
        ... 
       </ul> 
      </div> 

      <div id="tekst"> 
       <p>whatever</p> 
       ... 
      </div> 
      </div> 
     </div>

CSS, который описывает его:

#wrapper{max-width: 1000px; margin-top: 15px; background: #99CCCC;} 
#menu{overflow:auto;background: #FF9999; border-bottom-left-radius: 10px 20px; border-bottom-right-radius:20px 10px; border: 1px solid #FF9999; opacity:0.9;} 
#LEFT-CONTAINER{float: left; background-color: #71637D;}

Мой вопрос в том, почему #RIGHT-CONTAINERdiv#menu переполняется?
Я знаю, как это исправить, но хочу знать, почему происходит переполнение.

Спасибо!

screen capture

источник

2012-01-27 daniel.tosaba

Вам нужно выслать свой код html и css, чтобы посмотреть, что происходит –

Просто догадайтесь, не видя своего реального HTML ... попробуйте использовать «display: inline-block» вместо floats. –

Ваш код JsFiddle находится на другом языке и его нужно удалить из отвлекающей информации. –

Вы должны float:left; как #left-container и #right-container или, по крайней мере, float:right;#right-container, также не забудьте очистить поплавки

источник

2012-01-27 21:54:31

Зачем мне это нужно? 'overflow: hidden' заставляет его работать, но мне все еще не хватает понимания того, почему он иногда переполняется, а иногда и нет. Это не мой первый раз, чтобы сделать многоколоночный сайт с поплавками. Одного левого поплавка было достаточно, без контроля переполнения. Я поставил полный код в вышеупомянутом сообщении. Если у вас есть время, проверьте это. Спасибо –

Этот ответ не позволяет использовать гибкую ширину для правого столбца. –

Предполагая, что ваше право контейнер не абсолютно позиционирован я бы поставил Левое поле на нем равна ширине вашего левого контейнера, в этом случае 130px. Это означает, что вам не придется беспокоиться обо всех очищениях и всех элементах на вашей странице.

источник

2012-01-27 21:57:42 PCasagrande

К сожалению, CSS - относительно плохой инструмент для создания макетов столбцов. Посмотрите на http://www.alistapart.com/articles/fauxcolumns/ для альтернативного подхода.

источник

2012-01-27 21:59:50 xec

Плавающий контейнер вынимает его из «потока», аналогично позиционированию абсолютного.

видеть эти ссылки:

http://css-tricks.com/all-about-floats/

http://css-tricks.com/the-css-overflow-property/

, что вы можете сделать, это место overflow:hidden на элемент, который вы не хотите вступать в конфликт с поплавком.

источник

2012-01-28 05:28:59 Joseph

очень полезно, спасибо! –

Объединяя ответы от @ Джозеф и @PCasagrande и разработки ...

Применение float: left к #left-container берет его из потока, который по существу означает, что все другие не плавал block содержание уже не знают, что она существует. Следовательно, #right-container, элемент блока, делает то, что он обычно делает, когда нет другого содержимого вокруг и заполняет ширину его контейнера.

Важно отметить, что встроенный контент действительно выходит из пути поплавков. Вот почему на вашем скриншоте содержимое внутри #right-container расположено справа от #left-container, а фон #right-container заканчивается за #left-container. См. Пример: http://jsbin.com/eyusew/edit#html,live.

Просто положив левое поле на #right-container, равное ширине поплавка, вы по существу создаете пространство для поплавка. Пример: http://jsbin.com/iqufiw/2/edit#html,live. Обратите внимание, что теперь содержимое в #right-container перемещается вправо независимо от наличия поплавка: http://jsbin.com/iqufiw/3/edit#html,live.

Боковое примечание: вы, скорее всего, захотите применить какой-то clearfix CSS к #wrapper.

источник

2012-01-28 07:23:32

Почему происходит переполнение?

ответ

Смежные вопросы