So, I've set up this 139px height header in Dreamweaver, but when I preview it in a browser, the menu div splits onto a second row. Can anyone help me fix this issue?
This is the HTML structure:
<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's the CSS styling:
#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, #two, #three, #four, #five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
If you have any suggestions or solutions, please let me know. Your help is greatly appreciated!