Okey, so I got this site I'm testing out CSS, divs etc on and I got problem with centering the layout. In firefox it looks perfect, but when I'm using IE7 it's on the left.. (Link to the site is in my sig) The CSS code for the container: #container{ width: 820px; margin-left: auto; margin-right: auto; text-align:left; background: url(bilder/bilder2/bgc.gif) repeat-y; position:absolute; left:0; right:0; } Any help would be appreciated
You don't want the position: absolute, left: 0 or right: 0 on the container style. Then you'll need to wrap another div around container with the style, text-align: center, after that you should be good.
Remove the absolute positioning. Absolute positioning over-rides floating. Try this #container{ width: 820px; margin-left: auto; margin-right: auto; text-align:left; background: url(bilder/bilder2/bgc.gif) repeat-y; }
or just #container{ width: 820px; margin: 0 auto; text-align:left; background: url(bilder/bilder2/bgc.gif) repeat-y; }
I've tried removing absolute positioning.. it makes it work fine in IE, but in FF the container looses the bg..(the repeat of the bg at least) The same thing happens if I put margin: 0 auto;.. This happens: And I didn't quite understand the wrapper thing.. it's the same as before when I try that.. makes it work in IE but not FF..
Try this: html,body{ margin:0; padding:0; text-align: center; } #container{ width: 820px; height: 100%; margin: 0 auto; } #background { background: url(bilder/bilder2/bgc.gif) repeat-y; width: 820px; float: left; } Then use: <body> <div id="container"> <div id="background"> Content here </div> </div> And don't forget to add text-align: left; to your content, otherwise it will be centered.
You need to clear the floats (clear: both) just before the footer div, however you've got a mix of absolute and relative positioning which is going to cause you a problem. You need to remove all the absolute positioning. The other problem you have is the use of pre tags because the source layout adversely affects the rendered page, I'd normally use div.
http://stuff.tolranet.co.uk/dp/mooseman/ that's about the best I can do, but as per the original it doesn't work in IE6. Both the HTML and CSS were changed, I hope it's of some use, please let me know when you've finished with it and I'll delete it from my server.