CODEWITHSUNDEEP
csslayout
user1426442
user1426442

Reputation:

How to align layout to center with full background?

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?

Upvotes: 2

Views: 261

Answers (3)

Priyank Patel
Priyank Patel

Reputation: 6996

To solve the issue you have.I think you should just set margin:0 auto.You set margin-top and margin-left after setting margin:0 auto.I think that might be causing the problem.

Check demo fiddle.

Hope it helps you.

Upvotes: 0

John Stimac
John Stimac

Reputation: 5491

Set the element that contains the element you want centered to have text-align:center. Then set the element you want centered to have a left and right margin of auto. Then anything above those needs to have a width that allows it to expand to the width of the screen. Set it to width:auto or simply omit the width property.

Looking at your site you want to center #container inside the body element. Make sure to also give #container the appropriate width.

Upvotes: 0

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

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;
}

Upvotes: 2

Related Questions