ul is not inside div container - html

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.

Answer 3

You are floating your elements and need to add overflow: hidden to your PARENT container to restore the height. Use this and you wont need to add an extra div to your flow.
#container {
width:1000px; overflow: hidden;
}
http://jsfiddle.net/saUp7/1/

Answer 4

Change your float:left to 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 5

Just use display:inline-block instead (and add vertical-align: top for better look).
Float is designed for cutting block from flow, so it is normal behaviour for that: you have no no-floated blocks inside, so flow is near nothing.
Inline-blocks are in flow, so it will work.
And just one trick for inline-blocks: remember the spaces! If they are in source, there will be small margins within blocks, so just comment your indents
somethinganother
(look up to source)