Sunday morning brainfart. content div not showing up

Get Started
1

Hey All,

I dont know if I am having a sunday morning brainfart or what, but I am trying the simplest thing and I cannot get it to work

Basically I have my content div set to height:auto and margin:0 auto

My issue is, when I put another div inside my content with a height of 390px, the content div isnt showing up. I have the BG set as white.

So please someone help me get out of this Sunday stupidness. (I have done this so many times before but it has me scratching my head today)

Thanks

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="top">
    	<div class="header">
        </div><!--ends header-->
    </div><!--ends tops-->
    
    <nav>
    	<div class="navmain">
        </div><!--ends navmain-->
    </nav><!--ends nav-->


	<div id="content">
    
    
    	<div id="mainbox">
        	<div class="mainboxL">
            </div><!--ends mainboxL-->
            <div class="mainboxM">
            </div><!--ends mainboxL-->
            <div class="mainboxR">
            </div><!--ends mainboxL-->
        </div><!--ends mainbox-->
        
        
    </div><!--ends content-->



	<footer>
    	<div class="footermain">
        </div><!--ends footermain-->
    </footer><!-- ends footer-->


</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */


body {
	background-image:url(images/bg.jpg);
	}
	
	

/*********** Header *************/

.top {
	width:100%;
	height:auto;
	}
	
.header {
	width:1080px;
	height:155px;
	margin:0 auto;
	background-image: url(images/banner2.png);
	}
	
	
	
/*********** Menu *************/

nav {
	width:100%;
	height:auto;
	background-image:url(images/bg-menu.png);
	}
	
.navmain {
	width:1080px;
	height:70px;
	margin:0 auto;
	}

	
/*********** Content *************/

#content {
	width:1080px;
	height:auto;
	margin:0 auto;
	background-color:#ffffff;
	}
	
	
/*********** Home Page *************/

#mainbox {
	width:1060px;
	height:168px;
	float:left;
	background-color:#0C6;
	}
	
.mainboxL {
	width:375px;
	height:300px;
	float:left;
	}
	
.mainboxM{
	width:1060px;
	height:300px;
	float:left;
	}
	
.mainboxR {
	width:1060px;
	height:375px;
	float:left;
	}
	

	
/*********** Footer *************/

footer {
	width:100%;
	height:100px;
	background-image:url(images/bg-footer.png);
	}
	
.footermain {
	width:1080px;
	height:100px;
	margin:0 auto;
	}
2

The divs inside your “content” div are all floated, so you need to use some method of containing the floats - clearfix, overflow:hidden/auto or whatever best suits your actual page.

3