container div not containing

[babrees]

OK, Could somebody please have a look at this and tell me what I have done wrong!

http://www.littlemisstshirts.com/

html:

<div id="container"> 
<div id="header">Image</div>

<div id="main">text</div>

<div id="menu">
<div class="menubox">
  <ul class="menu">
  <li><a href="index.html">Home</a></li>
  </ul>
</div>
</div>

</div>

CSS:

BODY
{ 
 background-image:url(../images/bg.jpg);
 background-attachment:fixed; 
 color: #000000;
 font-family: tahoma, verdana, arial;
 font-size: 1em;
 padding:20px;
} 


#header {
height: 198px;
background-image:url(../images/bgheader.jpg);
background-position:bottom;
background-repeat:repeat-x;
padding:7px;
}


#container{
 margin: auto;
 color:#000000;
 background-color:#FFFFFF;
 border:6px solid #A00F1E;
}

#main {
padding: 5px;
float:right;
text-align:left;
width: 78%;
}


#menu {
 width: 175px;
 padding-top:8px;
text-align:left;
}

[jonpenny]

Hi, try clearing the floats in the container div with an empty div.

<div id="container"> 
    <div id="header">Image</div>
    
    <div id="main">text</div>
    <div id="menu">
        <div class="menubox">
        <ul class="menu">
          <li><a href="index.html">Home</a></li>
        </ul>
        </div>
    </div>
    <div class="clearboth">&nbsp;</div><!--Clear floats-->
</div>

Then add this to your CSS:

.clearboth {
	clear:both;
	line-height:0; 
	height:0;
}

Thats the method I personally use for clearing floats. Although someone may have a better more efficient way of doing things.

[babrees]

BRILLIANT - worked a treat - thank you