Hi there, Hope all is well ! I've created a layout that works fine in firefox, but is giving me problems with IE. I was wondering if someone could help. The middle column for some reason drops, but I am not too sure why. The HTML code is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="file:///C|/Documents and Settings/Hirani/My Documents/dart motif exp/stylesheet1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="access">skip to content and accessibility stuff </div> <div id="heada"> <div id="image">image</div> <div id="address">address</div> <div id="title">title</div> </div> <div id="nav"><ul><li><a href="#"> </a></li ><li><a href="#">Home</a></li ><li><a href="#">Button 1</a></li ><li><a href="#">Button 2</a></li ><li><a href="#">Button 3</a></li ><li><a href="#">Contact Us</a></li ></ul> </div> <div id="headb"> <div id="boxa">boxa</div> <div id="boxc">boxc</div> <div id="boxb">boxb</div> </div> <div id="main"> <div id="maincola">maincola</div> <div id="maincolc">maincolc</div> <div id="maincolb">maincolb</div> </div> <div id="footer">footer</div> </div> </body> </html> And the CSS is html, body, ul, ol, li, dd, dt, img, a, p, h1, h2, h3, h4, h5, h6, form, table, tr, td, fieldset {margin: 0; padding: 0; border: 0; } body{ background-color: #CCCCCC; color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align: center; } #wrapper{ width: 785px; background-color: #FFFFFF; border: 1px solid #000000; text-align:center; margin-right: auto; margin-left: auto; text-align: left; } #access{ width: 785px; height: 25px; border: 1px; text-align:center; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; } #heada{ width: 785px; height: 105px; border: 1px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } #image{ width: 145px; height: 105px; float: left; position:relative; text-align: center; } #title{ width: 455px; height: 105px; margin-right: 155px; margin-left: 155px; position: relative; text-align: center; } #address{ width: 145px; height: 105px; float: right; position: relative; text-align: center; } #nav { padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; width: 765px; } #nav ul { padding: 0px; margin: 0px; } #nav ul li { display: inline; padding: 0; margin: 0; } #nav ul li a { font-size: 80%; color: #FFFFFF; background-color: #0000CC; text-decoration: none; border-right: 1px solid #000000; height:45px; text-align: center; padding-top: 0px; padding-right: 10px; padding-bottom:0px; margin-right: 10px; margin-left: 10px; margin-right: 10px; padding-left: 10px; width: 145px; } #headb{ width: 765px; height: 150px; position: relative; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } #boxa{ width: 145px; height: 150px; float: left; position: relative; text-align: center; } #boxb{ width: 455px; height: 150px; margin-right: 155px; margin-left: 155px; position: relative; text-align: center; } #boxc{ width: 145px; height: 150px; float: right; position: relative; } #main{ width: 765px; clear:both; position: relative; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } #maincola{ width: 145px; float: left; position: relative; text-align: center; } #maincolb{ width: 455px; margin-right: 155px; margin-left: 155px; position: relative; text-align: center; } #maincolc{ width: 145px; padding: 0px; float: right; position: relative; text-align: center; } #footer{ width: 785px; height: 0; margin: 0; padding: 0; clear:both; position: relative; text-align: center; } Any help would be appreciated. Thanks
turn off your width:450px; in #boxb or decrease it lower 450px edit (addition) or add space in width > #headb