Question

I have a full background layout but the position of the white content box has an unexpected position and it’s not always centered on different screen resolutions. Should I make it liquid or elastic? Right now it’s fixed.

I tried using a fixed width container for the content box in the middle and margin: 0 auto, but that didn’t do anything

See code: http://avisuals.web.fc2.com/testexample.html

What should I do? Any suggestions?

Answer 1

change as per this in your css file style.css
http://avisuals.web.fc2.com/style.css

#container{
width: 960px;
margin: 0 auto;
}

and remove margin from

#contentbox-top and #content1 and contentbox-bottom

ie

#contentbox-top {
margin: 0 auto;
background-image: url(images/content_top.png);
background-repeat: no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_top.png,sizingMethod=crop);
width: 700px;
height: 37px;
position: relative;
z-index: 1;
}

#content1 {
margin: 0 auto;
background: url(images/content_middle.png) repeat-y center;
width: 692px;
position: relative;
}

#contentbox-bottom {
margin: 0 auto;
background-image: url(images/content_bottom.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_bottom.png,sizingMethod=crop);
background-repeat: no-repeat;
width: 700px;
height: 37px;
position: relative;
}