jednak to nie działa i w poglądzie w CHROME div menu_container ma wysokość 0px; Nie mam pojęcia jak to rozwiązać

css:
CODE
#header_container{
margin: 0 auto;
width: 989px;
}
#logo{
width: 200px;
float: left;
}
#header{
width: 100%;
height: 100px;
background:#cccccc;
}
#menu_bar{
width: 100%;
height: 25px;
background: #000000;
}
/*MENU BOX*/
#menu_container{
margin: 0 auto;
width: 989px;
height:auto;
}
#menu_box_first{
margin: 0;
padding: 0;
width: 245px;
height: 310px;
background: #d9bc9b;
float: left;
}
.menu_box{
margin-left: 3px;
width: 245px;
height: 310px;
background: #d9bc9b;
float: left;
}
margin: 0 auto;
width: 989px;
}
#logo{
width: 200px;
float: left;
}
#header{
width: 100%;
height: 100px;
background:#cccccc;
}
#menu_bar{
width: 100%;
height: 25px;
background: #000000;
}
/*MENU BOX*/
#menu_container{
margin: 0 auto;
width: 989px;
height:auto;
}
#menu_box_first{
margin: 0;
padding: 0;
width: 245px;
height: 310px;
background: #d9bc9b;
float: left;
}
.menu_box{
margin-left: 3px;
width: 245px;
height: 310px;
background: #d9bc9b;
float: left;
}
html
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header_container">
<div id="logo"></div>
<div id="header"></div>
<div id="menu_bar"></div>
</div>
<div id="menu_container">
<div id="menu_box_first"></div>
<div class="menu_box"></div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header_container">
<div id="logo"></div>
<div id="header"></div>
<div id="menu_bar"></div>
</div>
<div id="menu_container">
<div id="menu_box_first"></div>
<div class="menu_box"></div>
</div>
</body>
</html>
Pozdrawiam Piotr