Floating divs not floating left - html

Question

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">
<img src="titleimg.png" border="0" />
</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!

Answer 1

You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}

Answer 2

The width of your title element is set to 287px; which is larger than the container.

Answer 3

I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.