css centered fixed layout background image

Clint Neilsen · #1 (**permalink**) 04-30-2006, 01:15 AM

Hello Guys,

In CSS I am having trouble centering a fixed multi column layout with the a frame container having a repeating background image.

The below code make IE5 center but I cannot center in mozilla.

BODY {
background-color : yellow;
margin: 0 auto;
text-align: center; /*makes IE5 play nice*/
}

Any Ideas would be appreciated

Easywebdev · #2 (**permalink**) 04-30-2006, 01:29 AM

The body tag has a default width of 100% so margin auto = 0px.

You need to specify a width for an overall page container that wraps all content.

div #wrapper {
width: 80%;
}

<body>
<div id="wrapper">
Your content
</div>
</body>

Then margin: 0 auto; will have a left and right margin of 10%.

Hth.

Clint Neilsen · #3 (**permalink**) 04-30-2006, 03:26 AM

Cheers Easywebdev,

Gave it a go but the problem rmains unsolved. Here's the full code (shoulda posted it first)

<head>
<title>Three-column Layout</title>
<style type="text/css">
BODY {
background-color : yellow;
margin: 0 auto;
text-align: center; /*makes IE5 play nice*/
}
#content {
background-color: yellow;
padding: 0px;
position: relative;
width:760px;
height: 600px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin: 0px 0px 0px 15px;
}
#left {
background-color: green;
padding: 00px;
text-align: left;
width: 253.00px;
position: absolute;
left: 0px;
top: 150px;
}
#middle {
background-color: yellow;
padding: 0px;
text-align: left;
width: 253.00px;
position: absolute;
left: 253px;
top: 150px;
}
#right {
background-color: silver;
padding: 00px;
text-align: right;
width: 253.00px;
position: absolute;
right: 0px;
top: 150px;
}
H1 {
background-image: url(images/back.gif);
background-repeat: repeat-y;
margin-top: 0px;
height: 600px;
}
H1 span {
display:none;
}
</style>
</head>
<body>
<div id="content">
<H1><span>

</span></H1>
[img]images/test_logo.gif[/img]
keywords

<div id="left">
hello
</div>
<div id="middle">
wow
</div>
<div id="right">
hello
</div>
</div>
</body>

Easywebdev · #4 (**permalink**) 04-30-2006, 02:20 PM

You are overriding your left-right margin assignments.

#content {
background-color: yellow;
padding: 0px;
position: relative;
width:760px;
height: 600px;
margin-right: auto; <- set here
margin-left: auto; <- set here
text-align: center;
margin: 0px 0px 0px 15px; <- overriden and set again here
}

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode