CSS Help

mastermosley · Mar 26, 2011

Haven't fooled around with css in a while and am having difficulties centering my page. Heres what I got so far:

Code:

<body background="images/background.jpg">
<div id="wrap">

<div id="mainback">
<img src="images/fullbody.jpg" width="708" height="768" />
</div>
<div id="leftborder">
<img src="images/leftborder.jpg" width="16" height="768" />
</div>
<div id="rightborder">
<img src="images/rightborder.jpg" width="16" height="768" />
</div>
<div id="logoback">
<img src="images/logoback.jpg" width="708" height="155" />
</div>
<div id="linkback">
<img src="images/linkback.jpg" width="704" height="46" />
</div>
</div>
</body>

and here is my css

Code:

#leftborder {
	position: absolute;
	visibility: visible;
	height: 100%;
	left: 0px;
	top: 0px;
	background-repeat: repeat-y;
	background-image: url(images/leftborder.jpg);
}
#rightborder {
	position: absolute;
	visibility: visible;
	height: 100%;
	top: 0px;
	background-repeat: repeat-y;
	background-image: url(images/rightborder.jpg);
	left: 726px;
}
#logoback {
	position: absolute;
	visibility: visible;
	left: 17px;
	top: 0px;
	background-image: url(images/logoback.jpg);
}
#linkback {
	background-image: url(images/linkback.jpg);
	position: absolute;
	top: 155px;
	left: 17px;
	width: 708px;
}
#mainback {
	top: 0px;
	background-image: url(images/fullbody.jpg);
	width: 708px;
	left: 17px;
	position: absolute;
	visibility: visible;
}
#wrap {
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	width: auto;
}

The #wrap take should center my page but it does absolutely nothing any ideas?

BoneXXX · Mar 26, 2011

just to see where is the problem, what happens if dont use the "wrap" but if you use center tags.

PC-XT · Mar 27, 2011

The problem seems to be the absolute positioning.
The following works for me:
Code:
body{text-align:center}/*IE fix*/
#wrap {
	display: block;
	text-align:left;
	margin: 0 auto;padding:0px;
	position:relative;
	width:742px;
}
The other css can remain the same, with absolute positioning.

References:
http://www.iangraham.org/books/xhtml1/chap13/center-position.html
http://perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/

BTW, one of those links refers to a negative margin trick. The buggy method is shown here:
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
It didn't work for me when I tried it, and if it does, you still have problems with scrollbars.

mjnc · Mar 29, 2011

I use the method that PC-XT delivered and it's probably the one used most often, but there is another method.

#wrap {
width: 742px;
position: relative;
left: 50%;
margin-left: -371px;
}

I suppose you can do the same thing with em so it will be elastic.

mastermosley · Apr 13, 2011

Thanks for the responses guys, I have it working now

Log in or Sign up

CSS Help

mastermosley Sergeant

BoneXXX Private E-2

PC-XT Master Sergeant

mjnc MajorGeek

mastermosley Sergeant