html - Floating divs not floating left -
okay, supposed in 1 139px height header , renders such in dreamweaver, view in browser menu div splits down onto second row.
here's 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 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 appreciated!
you making mistake of thinking total width 1040px adding width of #menu , #title forgetting have 1px border-left on #menu hence width becomes 1041 , hence gets pushed over. if reduce either menu or title's width 1pixel go :)
also can save code on css menu elements if going repeat same code #one, #two etc etc:
#menu > div { width:19%; height:139px; border-right: solid 1px #474747; float:left; }
Comments
Post a Comment