One for the CSS experts - "margin-left: auto" not working
Hi,
I'm building a new theme based on a copy of theme 4 (minimal). I would like all of my page content to render in fixed width centralised position.
I've created a second css (wine.css) file containing the following:
body {
margin: 0;
padding: 0;
font: 73% "Trebuchet MS", tahoma, verdana, arial, sans-serif;
line-height: 1.3em;
color: #666;
background: #F0E9DD url(body_bg.gif) repeat-y;
background-position: 50% 0px;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
I have then referenced this additional css file in the header definition in the page template (one level tabs).
I've also added the following tag to the end of the header definition
[div id="container"]
and added the closing div tag to the end of the footer definition, just before the closing body tag.
When I run the page the background image is displayed correctly, the page content is displayed 700px wide, but the content is not centered ie the margin-left: auto and margin-right: auto tags have no effect.
Any ideas why?
Thanks,
Andrew.