ul не находится внутри контейнера div

Question

Почему мой контейнер не является цвет фона красным, а ul не находится внутри контейнера div?

СТИЛЬ:

#container { 
      width:1000px 
      } 

#categoryorder { 
      float:left; 
      width:500px; 
      margin:0 0 0 50px; 
      display:inline; 
      list-style-type:none 
} 

#categoryorder li { 
      color:#003366; 
      font-size:20px; 
      float:left; 
      width:196px; 
      background-color:#fcfcfc; 
      border: 2px solid #dddddd; 
      margin:0 50px 50px 0; 
      line-height:50px; 
      text-align:center; 
      display:inline; 
      cursor:move 
} 

HTML:

<div id="container" style="background-color: red;"> 
    <ul id="categoryorder"> 
     <li id="ID_1">1</li> 
     <li id="ID_2">2</li> 
     <li id="ID_3">3</li> 
     <li id="ID_4">4</li> 
     <li id="ID_5">5</li> 
     <li id="ID_6">6</li> 
     <li id="ID_7">7</li> 
     <li id="ID_8">8</li> 
    </ul> 
</div> 

Answer 1

Потому что вы плывете все элементы внутри, не очищая их. Создайте четкий класс, а затем добавить элемент в нижней части:

HTML

<div id="container" style="background-color: red;"> 
    <ul id="categoryorder"> 
     <li id="ID_1">1</li> 
     <li id="ID_2">2</li> 
     <li id="ID_3">3</li> 
     <li id="ID_4">4</li> 
     <li id="ID_5">5</li> 
     <li id="ID_6">6</li> 
     <li id="ID_7">7</li> 
     <li id="ID_8">8</li> 
    </ul> 
    <div class="clr"></div> 
</div> 

CSS

.clr{ 
    clear:both; 
    font-size:0; 
} 

JSFiddle

Answer 2

Когда вы плывете детей вы существенно удалить их из потока документа и элемента контейнера высота не сжимается. Добавьте overflow:auto; в ваш #container div, чтобы восстановить поведение, которое вы ищете.

#container { 
    width:1000px; 
    overflow:auto; 
} 

jsFiddle example

Обратите внимание, что этот ответ не требует каких-либо дополнительных (несемантических) дивы, чтобы получить желаемый результат.

Answer 3

Измените свой float:left на display:inline-block;

Css:

#categoryorder { 
    width:500px; 
    margin:0 0 0 50px; 
    display:inline-block; /*from float:left; to display:inline-block; */ 
    list-style-type:none; 
} 

DEMO

Answer 4

Вы плывут ваши элементы и нужно добавить overflow: hidden к вашему родительскому контейнеру, чтобы восстановить высоту. Используйте это, и вам не нужно добавлять дополнительный div в поток.

#container { 
      width:1000px; overflow: hidden; 
      } 

http://jsfiddle.net/saUp7/1/

Answer 5

Просто используйте дисплей: встроенный блок вместо этого (и добавить вертикальное выравнивание: сверху для лучшего взгляда).

Float предназначен для резания блока из потока, поэтому для него характерно нормальное поведение: у вас нет неплавающих блоков внутри, поэтому поток почти ничего не стоит.

Инлайн-блоки в потоке, поэтому он будет работать.

И только один трюк для встроенных блоков: помните пространства!Если они находятся в источнике, там будут небольшие поля внутри блоков, так что просто комментировать ваши отступы

что-то

другой

(смотреть до источника)