Floating divs not floating left

Floating divs not floating left

Okay, so this is all supposed to be in one 139px height header and it
renders as such in dreamweaver, but as soon as I view it in a browser the
menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<a href="index.html"><img src="titleimg.png" border="0" /></a></div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image:url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display:inline-table;
}
#header2 {
width: 1040px;
margin:0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image:url('title3d.png');
background-repeat:no-repeat;
background-position: right bottom;
float:left;
}
#menu {
width: 753px;
height:13px;
border-left: solid 1px #474747;
display:inline-table;
}
#one {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
#two {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
#three {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
#four {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
#five {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
Help would be greatly appreciated!