ul is not inside div container

Question

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>

Answer 1

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

Answer 2

When you float the children you essentially remove them from the flow of the document and the container element's height shrinks to nothing. Add overflow:auto; to your #container div to restore the behavior you seek.

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

jsFiddle example

Note that this answer doesn't require any extra (non-semantic) divs to get the desired result.