Okay, a new site im working on. In firefox, the left boxes are not in the background div, as in the content div is not stretching to fit the left boxes inside it. Also, i have to use z-index:-1 on the background just so it doesnt go OVER the left boxes and cover up the top of it. Anyone know what i could do (second time making a layout from scratch, going from tables to divs) In IE however, the left boxes appear exactly how i want them to, also i need my whole site centered (as you can tell, it is mostly a centered layout) heres my code (very bare, no content yet) the site is www.gamersinsaninty.com/test <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Gamers Insanity</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"></div> <div id="header"></div> <div id="content"> <div id="leftstuff"> <div id="sponsors_left"></div> <div id="left_box_mid">This is a test. </div> <div id="left_box_bot"></div> <div id="community_left"></div> <div id="left_box_mid">This too! </div> <div id="left_box_bot"></div> <div id="members_left"></div> <div id="left_box_mid">hip Hip Horray for testing! </div> <div id="left_box_bot"></div> </div> <div id="content"></div> <div id="news"> <div id="news_title"> </div> </div> </div> </body> </html> Code (markup): body { background: #901f1f; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -476px; /* half the width of the div */ width: 953px; height: auto; } #header { background:url(images/header.gif) no-repeat; width: 953px; height: 223px; } #content { position:relative; background:url(images/content.gif) repeat-y; width: 953px; min-height: 35px; z-index:-1; } #leftstuff { float:left; margin-left:50px; } #sponsors_left { background:url(images/sponsors_left.gif) no-repeat; width:231px; height:42px; } #community_left { background:url(images/community_left.gif) no-repeat; width:231px; height:51px; } #members_left { background:url(images/members_left.gif) no-repeat; width:231px; height:51px; } #left_box_mid { background:url(images/left_box_mid.gif) repeat-y; width:231px; min-height:30px; } #left_box_bot { background:url(images/left_box_bot.gif) no-repeat; width:231px; height:3px; } #content { position: relative; } #news { background:#ffffff; } #news_title { background:#e2e2e2; } Code (markup): EDIT: I FIXED IT! But, it was because of the float:left; will this make it mess up later? like will my layour fall apart?
For starters, you've got two divs with the ID "content". They can't share the same ID. I think getting rid of the second <div id="content"></div> will get you on your way to fixing this. I tried it out using the code above and it started to look a lot better. I was even able to get rid of that sorta ugly z-index:-1; thing after cutting the second content div. Oops. Sorry, I missed your edit. Not sure how to answer your question since I don't know what you're going to add to the layout later. What I said about having two divs with the same ID being bad is still true though.
yeah, i didnt notice that second div in there. i only want content to come up once per page so thats why its an id not a class.. Thanks for the help though
Also, don't forget about clearing issues. If you have a parent container with two child containers and both children are floated, they will no longer contribute to the height of the parent (which will cause it to 'collapse' up. Check out this page for more info: http://www.webtoolkit.info/css-clearfix.html
this is what is happening, both children are floated, and the parent is not. I added a clear:both; to the parent, div id=main and the two children are still out of the div.
actually it works in all browsers now, opera doesnt like to change the appearance of things without a cache purge, which im not used to.