I'm trying to replicate the attached layout, but am REALLY struggling to get this to: 1.) WORK! 2.) Work in IE AND FireFox. If someone could look at my attachment to see the layout I am trying to achieve and suggest a viable solution. I have posted to code below: CSS: BODY { background-color: #369; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } /* centered layout */ #wrapper { background-color: #FFF; border: 3px solid #CCC; _width: 774px; min-width: 774px; max-width: 926px; margin: 15px auto 10px auto; } /* end centered layout*/ /* logo and rounded corner presentational layer */ #header { margin:0; padding-top:8px; width:100%; } #header h1#logo { background: transparent url('images/logo.gif') no-repeat left top; width: 154px; height: 65px; text-indent: -999em; margin-left: 7px; margin-top: 6px;} #leftcorner { float:left; background: transparent url('images/bkg_header_left.gif') no-repeat left top; margin-left: -3px; margin-top:-3px; width:35px; } #rightcorner { float:right; background: transparent url('images/bkg_header_right.gif') no-repeat right top; margin-right: -3px; margin-top:-3px; width:35px; } /* end logo and rounded corner presentational layer */ /* shopping tools */ #header #toplinkswrap { float: right; margin-top: -90px; margin-right: 16px; font-size:small; _font-size: x-small; } #header #toplinkswrap ul { margin:0; padding:0 } #header #toplinkswrap ul li { display:inline; padding: 0 0.4em; background: #fff url('images/bkg_toplinkdiv.gif') no-repeat right top; } #header #toplinkswrap ul li a:link, #toplinkswrap ul li a:visited, #toplinkswrap ul li a:hover, #toplinkswrap ul li a:active { padding:0 0.4em; color:#656565; font-weight:normal; } #header #toplinkswrap ul li#tlhelp a { font-weight:bold; } #header #toplinkswrap ul li#trolley { background-image:none; } #trolleyitems, #trolleyprice { color:#309a30 !important } #trolleylink { background: transparent url('images/icon_trolley.gif') no-repeat right top !important; font-weight:bold !important; padding-left:.3em; padding-right:2.3em !important; color:#309a30 !important; } /* end shopping tools */ /* header search box */ #searchwrap { float: right; clear:both; width: 43em; background: #ec2e2c url('images/bkg_search.gif') no-repeat left top; padding: .3em 0 .3em 0; font-size: small; _font-size: x-small; } form#sb { margin:0; padding:0; text-align:right; } #fssearch { color:#fff; margin-left:3em; float:left; } #searchheader { font-weight:bold; } #atoztext { display:inline;padding:0 .7em 0 20px; } #atoztext a:link, #atoztext a:visited, #atoztext a:hover, #atoztext a:active { background-color:#ec2e2c; color:#fff; } #btnsearch { vertical-align: top } input#search { border:1px solid #C00; padding:0 .3em 0 .3em; margin:0 .6em} /* end header search box */ Code (markup): HTML: <body> <div id="wrapper"> <span id="leftcorner"> </span> <span id="rightcorner"> </span> <div id="header"><h1 id="logo">Site Title Text to Aid Search Engine Compatibility</h1> <div id="toplinkswrap"> <ul> <li id="tlhome"><a href="#" title="home">Home</a></li> <li id="tllogreg"><a href="#" title="login or register">Login/Register</a></li> <li id="tlstorelocator"><a href="#" title="store locator">Store Locator</a></li> <li id="tlhelp"><a href="#" title="help">Help</a></li> <li id="trolley"><a href="#" id="trolleylink" title="trolley">Trolley</a> <span id="trolleyitems">99 Items = </span><span id="trolleyprice">£1000.00</span></li> </ul> </div> <div id="searchwrap"> <form id="sb" name="sb" action=""> <fieldset id="fssearch" title="Search the site"> <label for="search"><span id="searchheader">Search</span> by word, or catalogue number</label> <input id="search" type="input" value="search string"/> <input id="btnsearch" type="image" value="go" alt="Search button" src="images/b_search.gif" /> </fieldset> </form> <p id="atoztext"><a href="#" title="A to Z Index">A - Z Index of Services</a></p> </div> </div> </div> </body> Code (markup):