Floating Problem

[smartic]

I'm having problem with this css why i don't know

That is my HTML:
[HTML]<div id="main_container">
<div id="menu">
<div id="menu_Categories">
<img src="../IMGS/LIST_O_00.gif" width="13" height="14" align="top" border="0"/> Smartic Categories
</div>
<div id="Sub_Categories">
<a href="#"><img src="../IMGS/LIST_O_01.gif" width="13" height="13" align="top" border="0"/> Real Estate</a>
<a href="#"><img src="../IMGS/LIST_O_01.gif" width="13" height="13" align="top" border="0"/> Video Games</a>
</div>
</div>
<div id="container_body">Welcome visitors</div>
</div>[/HTML]

That is my CSS:

#main_container {
    color: #666666;
    padding-top: 50px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border: 1px solid #CCCCCC;
}
#menu {
    width: 200px;
    float: left;
}
#menu_Categories {
    background-color: #9bcdff;
    color: #FFFFFF;
    padding: 5px;
}
#Sub_Categories {
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    padding: 5px;
}
 
#Sub_Categories a {
    color: #999999;
    font-size: 11px;
    display: block;
    padding: 3px;
}
#Sub_Categories a:hover {
    color: #FF3300;
    background-color: #E2EFFE;
    border: 1px solid #666666;
    padding: 2px;
}
#container_body {
    margin-left: 220px;
}

[ronverdonk]

So you showed the code. What is the problem you encounter?

Ronald

[smartic]

Smartic Categories should be within the border of the page but it dosen't do that it gets out of the border of the page

[drhowarddrfine]

Elements are not to expand to contain floated elements. But to do what you want, add 'overflow:auto' to #main_container.