ul is not inside div container

css, html

Solution

Because you are floating all of the elements within, without clearing them. Create a clear class and then add an element at the bottom:

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

Problem

Why my container is not background color red and ul is not inside div container ?? STYLE: ``` #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> ```

Original source