Floating Problem

[smartic]

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

That is my HTML:
[HTML]<div id="main_contai ner">
<div id="menu">
<div id="menu_Catego ries">
<img src="../IMGS/LIST_O_00.gif" width="13" height="14" align="top" border="0"/> Smartic Categories
</div>
<div id="Sub_Categor ies">
<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_b ody">Welcome visitors</div>
</div>[/HTML]

That is my CSS:

[code=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_Categorie s {
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;
}[/code]

[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 .