So, I'm trying to create a centered layout in CSS. IE is rendering it correctly but Firefox is messing it up. I'm attaching a couple of screenshots, the incorrectly rendered version in Firefox and the correctly rendered version in IE. As you can see, I want everything inside the (white) centered box. I've stripped it down somewhat, but here is the code in question. CSS body { margin-top: 0; padding-top: 0; position: absolute; top: 0; background-color: #DCB1F7; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align: center /* my work-around to center the "outer" div...for some reason it didn't work otherwise. */ } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #main { width: 96%; margin-top: 1px; padding: 10px; margin: 10px; } Code (markup): Any help is much appreciated. Scotty
Hmm i don't think the code you provided has anything to do with the problem, it could even be the HTML just post a temp link to the problem or post some of the html and more css up and i'll try and have a look through it for you if you want, if not wait for someone else they may be able to help otherwise.
a) why put 0 margin/padding or position the body? b) is main div nested within outer div? it looks like it is in IE but not in FF, which is odd indeed. c) do you have an extra </div> or something leftover in your html code? i've seen something similar to this when the page renders in quirks mode, though i'm afraid i'm not much help as i'm just learning myself. i can't imagine its the css causing the problem, though, since the css itself doesnt look like it's trying to do anything too crazy.
I'm including the page source and the css file. Let me know if you need anything else. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="flowers.css" /> <title>Compare Online Florists - get the best deal buying flowers online</title> <SCRIPT language=JavaScript> function reload(form) { var val=form.sort_by.options[form.sort_by.options.selectedIndex].value; self.location='index.php?cat=' + val ; } </SCRIPT> </HEAD> <BODY> <div id="outer"> <div id="main"> <div id="header"> <img src="images/logo.jpg" alt="Compare Florists @ Compare-A-Licious.com" align=left> <div id="topNav"> <a href="index.php">Home</a> | <a href="about.php">About</a> | <a href="articles.php">Articles</a> | <a href="privacy.php">Privacy</a> </div> <div id="topRightAd"> <img src="images/banners/test1.gif"> </div> </div> <P align=left>No matter what you’re celebrating – a new baby, a birthday or anniversary – whether you want to say thank you, congratulations, get well or I’m thinking of you, you still want to find the best deal. It’s never been easier or more fun to send flowers online, and we're here to help you find the online florist to meet your needs. Who could you surprise with fresh flowers today? <div id="featuredWrapper"><div id="featuredLeft"> <table><th>Gift Tree</th> <tr><td align="center"><img src="images/featured/gift_tree.jpg" alt="Gift Tree"> </td> </tr> <tr> <td><div align="center">Flowers, gift baskets, balloon bouquets, and more. Most come with FREE SHIPPING! Nothing says 'I Love You' like flowers.<BR><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=1">MORE INFO</a></div> </td> </tr> </TABLE> </div> <div id="featuredCenter"> <table><th>Just Flowers</th> <tr><td align="center"><img src="images/featured/just_flowers.gif" alt="Just Flowers"> </td> </tr> <tr> <td><div align="center">Fresh and beautiful floral arrangements and quality gifts that will make your recipient smile. Guaranteed same-day delivery.<BR><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=2">MORE INFO</a></div> </td> </tr> </TABLE> </div> <div id="featuredRight"> <table><th>1-800-Florals</th> <tr><td align="center"><img src="images/featured/1_800_florals.gif" alt="1-800-Florals"> </td> </tr> <tr> <td><div align="center">Want to make someone feel extra special? Surprise them with fresh flowers and your personal note of love, appreciation, or gratitude.<BR><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=3">MORE INFO</a></div> </td> </tr> </TABLE> </div> </div><form METHOD=post name=f1 action=""><div id="selectBoxRow"><table border=0><tr><TD align="right" width="120"><img src="images/compare.gif" alt="Choose a feature"></TD><TD align="left"> <select name='sort_by' onchange="reload(this.form)"><option value="">Select One:</option><option value='1'>Flowers for under $30</option><option value='2'>Sunday Delivery Available</option><option value='3'>International Delivery Available</option><option value='4'>Gift Baskets Available</option><option value='5'>7 Day Freshness Guarantee</option></select></TD><TD align="right"><a href="index.php"><img src="images/back_home.gif" alt="Go Back Home"></a></TD></TR></table></div></FORM><div id="largeGrid"><TABLE width="100%" border=1><TR><TD rowspan="2" align="center"><strong>Florist Name</strong></TD><TD colspan="2" align="center"><strong>Price</strong></TD><TD rowspan="2" align="center"><strong>Same Day<br>Delivery</strong></TD><TD rowspan="2" align="center"><strong>Guarantee</strong></TD><TD rowspan="2" align="center"><strong>International<br>Delivery</TD><TD rowspan="2" align="center"><strong>Gift Baskets</TD><TD rowspan="2" align="center"><strong>Reminder Service</TD><TD rowspan="2" align="center"><strong>Details</TD></TR><TR><TD align="center">Min</TD><TD align="center">Max</TD></TR><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/1_800_florals.gif" alt="1-800-Florals"> </td> <td width="79%"><strong>1-800-Florals</strong><br>Local, National & International Florist Delivery.<br><a href="moreinfo.php?q=3">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$29.95</strong></div></center></td><td bgcolor="#FFFFFF"><center>$209.95</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sat</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center><a href="http://www.somefflike.com">VISIT SITE<br><a href="moreinfo.php?q=3">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/beyond_blossoms.gif" alt="Beyond Blossoms"> </td> <td width="79%"><strong>Beyond Blossoms</strong><br>Beautiful European-designed, fresh flower bouquets.<br><a href="moreinfo.php?q=7">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$29.95</strong></div></center></td><td bgcolor="#FFFFFF"><center>$51.95</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Tues-Sat</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Cont. USA</center></td><td bgcolor="#FFFFFF"><center>n/a</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center><a href="">VISIT SITE<br><a href="moreinfo.php?q=7">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/flower_farm.gif" alt="Flower Farm"> </td> <td width="79%"><strong>Flower Farm</strong><br>Send the freshest flowers money can buy to over 60 countries.<br><a href="moreinfo.php?q=8">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$29.99</strong></div></center></td><td bgcolor="#FFFFFF"><center>$449.99</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sun</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center><a href="">VISIT SITE<br><a href="moreinfo.php?q=8">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/flowers_a_a.jpg" alt="Flowers Across America"> </td> <td width="79%"><strong>Flowers Across America</strong><br>Leading Internet florist with great prices and great service.<br><a href="moreinfo.php?q=4">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$37.95</strong></div></center></td><td bgcolor="#FFFFFF"><center>$189.95</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sat</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>USA & Canada</center></td><td bgcolor="#FFFFFF"><center>n/a</center></td><td bgcolor="#F2F7E0"><center>n/a</center></td><td bgcolor="#FFFFFF"><center><a href="http://www.scottysbody.com">VISIT SITE<br><a href="moreinfo.php?q=4">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/flowers_fast.jpg" alt="Flowers Fast"> </td> <td width="79%"><strong>Flowers Fast</strong><br>Make some happy. Send Flowers Fast!<br><a href="moreinfo.php?q=6">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$14.90</strong></div></center></td><td bgcolor="#FFFFFF"><center>$277.90</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sat</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>USA & Canada</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>n/a</center></td><td bgcolor="#FFFFFF"><center><a href="">VISIT SITE<br><a href="moreinfo.php?q=6">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/flowers_whisper.gif" alt="Flowers Whisper"> </td> <td width="79%"><strong>Flowers Whisper</strong><br>3rd generation florist open 7 days a week.<br><a href="moreinfo.php?q=9">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$30.00</strong></div></center></td><td bgcolor="#FFFFFF"><center>$214.99</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sun</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center></center></td><td bgcolor="#FFFFFF"><center></center></td><td bgcolor="#F2F7E0"><center></center></td><td bgcolor="#FFFFFF"><center><a href="">VISIT SITE<br><a href="moreinfo.php?q=9">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/gift_tree.jpg" alt="Gift Tree"> </td> <td width="79%"><strong>Gift Tree</strong><br>Flowers, gift baskets, balloon bouquets, and more. FREE SHIPPING!<br><a href="moreinfo.php?q=1">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$19.95</strong></div></center></td><td bgcolor="#FFFFFF"><center>$424.95</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sun</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>n/a</center></td><td bgcolor="#FFFFFF"><center><a href="http://www.scottysbody.com">VISIT SITE<br><a href="moreinfo.php?q=1">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/just_flowers.gif" alt="Just Flowers"> </td> <td width="79%"><strong>Just Flowers</strong><br>Save $10 on order $50 and over.<br><a href="moreinfo.php?q=2">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$29.99</strong></div></center></td><td bgcolor="#FFFFFF"><center>$239.99</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sun</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center><a href="http://www.scottysbody.com">VISIT SITE<br><a href="moreinfo.php?q=2">MORE INFO</center></td><TR><td width="240"bgcolor="#FFFFFF"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="21%"><img src="images/small/usa_florist.gif" alt="USAFlorist.com"> </td> <td width="79%"><strong>USAFlorist.com</strong><br>The perfect place to find great bargains for all your floral needs.<br><a href="moreinfo.php?q=5">MORE INFO</a></td> </tr> </table> </td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>$29.99</strong></div></center></td><td bgcolor="#FFFFFF"><center>$219.99</center></td><td bgcolor="#F2F7E0"><center><div id="blue"><strong>Mon-Sun</strong></div></center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>Yes</center></td><td bgcolor="#FFFFFF"><center>Yes</center></td><td bgcolor="#F2F7E0"><center>n/a</center></td><td bgcolor="#FFFFFF"><center><a href="">VISIT SITE<br><a href="moreinfo.php?q=5">MORE INFO</center></td></TR></TABLE></div><div id="quickLinks"><TABLE border=1><TR><TH colspan=3 bgcolor="#F2F7E0"><img src="images/quick_links.gif" alt="Online Florists - Quick Links"></TH></TR><TR><td align=center><a href="http://www.somefflike.com">1-800-Florals</a></td><td align=center><a href="">Beyond Blossoms</a></td><td align=center><a href="">Flower Farm</a></td></tr><tr><td align=center><a href="http://www.scottysbody.com">Flowers Across America</a></td><td align=center><a href="">Flowers Fast</a></td><td align=center><a href="">Flowers Whisper</a></td></tr><tr><td align=center><a href="http://www.scottysbody.com">Gift Tree</a></td><td align=center><a href="http://www.scottysbody.com">Just Flowers</a></td><td align=center><a href="">USAFlorist.com</a></td></tr><tr></TR></TABLE></div><div id="footer"><table border=0><tr><td align="center"><a href="about.php">About</a> | <a href="articles.php">Articles</a> | <a href="contact.php">Contact Us</a> | <a href="privacy.php">Privacy Policy</a> | <a href="sitemap.php">Site Map</a> | <a href="terms.php">Terms Of Service</a></td><tr><td align="center">© 2008 Compare-Florists-Online All Rights Reserved.</td></tr></tr></TABLE></div> </div> </div> </BODY> </HTML> Code (markup): body { margin-top: 0; padding-top: 0; position: absolute; top: 0; background-color: #DCB1F7; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align: center /* my work-around to center the "outer" div...for some reason it didn't work otherwise. */ } a:link, a:visited { text-decoration: none; } a img { border: 0; } form { margin: 0px; padding: 0px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #main { width: 96%; margin-top: 1px; padding: 10px; margin: 10px; } #main P { margin-top: 0px; padding-top: 0px; margin-top: 10px; margin-bottom: 10px; } #header { height: 98px; width: 100%; position: relative; float: left; border: 1px solid #777; } #topRightAd { position: absolute; right: 0%; width: 50%; top: 15px; padding: 0px; } #topNav { position: absolute; right: 0%; padding: 0px; font-size:12px; } #featuredWrapper { width: 100%; position: relative; float: left; border: 1px solid #777; } #featuredLeft { width: 33%; float: left; } #featuredLeft Table { padding-top: 2px; border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; background: #F2F7E0; } #featuredLeft Table TH { border: 1px solid #777; font-size: 12px; padding: 5px; background: #B1F7B3; } #featuredLeft Table TD { padding-top: 5px; padding-bottom: 5px; } #featuredCenter { width: 34%; float: left; } #featuredCenter Table { padding-top: 2px; border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; background: #F2F7E0; } #featuredCenter Table TH { border: 1px solid #777; font-size: 12px; padding: 5px; background: #B1F7B3; } #featuredCenter Table TD { padding-top: 5px; padding-bottom: 5px; } #featuredRight { width: 33%; float: right; } #featuredRight Table { padding-top: 2px; border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; background: #F2F7E0; } #featuredRight Table TH { border-bottom: 1px solid #777; font-size: 12px; padding: 5px; background: #B1F7B3; } #featuredRight Table TD { padding-top: 5px; padding-bottom: 5px; } #selectBoxRow { margin-bottom: 10px; margin-top: 10px; width: 100%; position: relative; float: left; } #selectBoxRow table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-top: 5px; font-size: 12px; } #largeGrid { width: 100%; position: relative; float: left; } table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-top: 5px; font-size: 12px; font-size: 10px; } table table { border-collapse: collapse; border-spacing: 0; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; font-size: 10px; } #blue { color: #2385B6; font-family:Verdana, Arial, Helvetica, sans-serif; } #quickLinks { width: 100%; position: relative; float: left; border-collapse: collapse; border-spacing: 0; margin-top: 15px; } #quickLinks Table { padding-top: 2px; border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } #quickLinks Table TD { border: 0px; } #quickLinks Table TH { padding: 5px; border-bottom: 1px solid #777; } #moreInfoMain { width: 82%; float: left; padding-left: 1em; } #moreInfoMain table { border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } #moreInfoMain table TH { border: 1px solid #777; font-size: 12px; padding: 5px; background: #F2F7E0; } #moreInfoMain table td { padding: 10px; } #moreInfoLeftNav { width: 18%; float: left; padding-right: 1em; padding-left: 1em; } #moreInfoLeftNav table { border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } #moreInfoLeftNav table TH { border: 1px solid #777; font-size: 12px; padding: 5px; background: #F2F7E0; } #moreInfoLeftNav td { float: left; padding-top: .2em; padding-bottom: .2em; } #footer { width: 100%; position: relative; float: left; border-collapse: collapse; border-spacing: 0; margin-top: 15px; } #contact { width: 82%; float: left; padding-left: 1em; } #contact Table { padding-top: 2px; border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } #contact Table TD { border: 0px; } #contact Table TH { padding: 5px; border-bottom: 1px solid #777; } Code (markup):
OK Basically if you get rid of a lot of the unessecary floats it will work.. so get rid of the floats on featuredwrapper, featured left, featuredright, selectbox, quicklinks basically off everything. Then the site will look OK in Firefox with the exception of the 3 boxes at the top.
OK, this should work. Make these 3 changes to your stylesheet. 1.Take the float:left and float:right out of everything in your style sheet. 2.Now add float:left; to the following classes only. .featuredCenter and .featuredRight only these two classes! 3.Now add this: clear:both; Code (markup): to the style .selectBoxRow
Thanks so much for your help, wd_2k6. That worked out great. I have two more questions. First, what would be the proper way to style my boxes so they would appear like the attached image? Do I need the wrapper? I essentially want them to span the 100% width but have padding in between each of them. My second question has to do with my header. It contains three elements: the logo, the top nav, and the topRightAd. I've tried using absolute positioning but that doesn't really working being that I am not using a fixed-width layout. Again, your help is much appreciated. Scotty
Hi Glad it Worked, What is wrong with the Header i can't see it on the screenshot? I'm not sure on the proper way to style the boxes as i'm not 100% on what should be used where, but i don't think that using tables is a good idea. Instead you could do this: For the HTML: <div class="box"> <div class="boxh">Gift Tree</div> <img src="images/featured/gift_tree.jpg" alt="Gift Tree"> Flowers, gift baskets, balloon bouquets, and more. Most come with FREE SHIPPING! Nothing says 'I Love You' like flowers.<br><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=1">MORE INFO</a></div> </div> <div class="box"> <div class="boxh">Just Flowers</div> <img src="images/featured/just_flowers.gif" alt="Just Flowers"> Fresh and beautiful floral arrangements and quality gifts that will make your recipient smile. Guaranteed same-day delivery.<br><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=2">MORE INFO</a> </div> <div class="box"> <div class="boxh">1-800-Florals</div> <img src="images/featured/1_800_florals.gif" alt="1-800-Florals"> Want to make someone feel extra special? Surprise them with fresh flowers and your personal note of love, appreciation, or gratitude.<br><a href="site.php">VISIT SITE</a> | <a href="moreinfo.php?q=3">MORE INFO</a> </div> Code (markup): and the CSS would simply be: .box {width:33%;float:left; text-align:center;border: 1px solid #777;background: #F2F7E0;} .boxh { width: 100%; font-size: 12px; background: #B1F7B3;} Code (markup): I'm not sure if this is the proper way to do it but it gets rid of the tables.
Thanks, I really appreciate your help, wd_2k6. For the header....here's my question... As you know, my page is a flexible layout. My header should contain three elements...the logo (aligned left), the topNav (aligned top, right), and the topRightAd (aligned right just under the topNav). Here is the CSS and HTML I am currently using. #header { height: 98px; width: 100%; position: relative; } #topRightAd { position: absolute; right: 0%; width: 50%; top: 15px; padding: 0px; } #topNav { position: absolute; right: 0%; padding: 0px; font-size:12px; } Code (markup): <div id="header"> <img src="images/logo.jpg" alt="Compare Florists @ Compare-A-Licious.com" align=left> <div id="topNav"> <a href="index.php">Home</a> | <a href="about.php">About</a> | <a href="articles.php">Articles</a> | <a href="privacy.php">Privacy</a> </div> <div id="topRightAd"> <img src="images/banners/test1.gif"> </div> </div> Code (markup): My problem occurs when I re-size my browser window, the ad overlays the logo. See the two screenshots. The first one is the "maximized" window and the second one is when the window has been resized. Thanks man, Scotty
Oh I see, well the problem is obviously both your header image and ad are a fixed size, which obviously causes them to overlap each other. So you've got some options: You could make the banner smaller, or make the header image smaller. You could have it so that the header image gets smaller with the page, however the picture may get distored. To do this you'd just have to put the image at 100% width or whatever % you wish. Another option is to have the ends of the picture chopped off as the page is resized but i don't think this is an option looking at your image. Or you could set a min-width for the whole page so that nobody can resize the page smaller than a certain px, so when they meet each other you can make sure that the page cannot be resized any futher which takes the fluidity away to an extent. Another option would be to float the banner so it gets pushed underneath the header image when there is not enough room. Here is also a thread where i had a similar problem: http://forums.digitalpoint.com/showthread.php?t=706259 I can't think of any other ways, personally i think a combination of making a smaller header image and setting a min-width are your best options.