[AnalyticLunatic]

Hello everyone,

I seem to be having trouble centering my Container div. Attached is a screenshot of what it is currently doing and below is the css code for the div. I am trying to position the entire webpage content (Container Div) in the center of the page, but none of my quick google searches have resulted in anything usable

Any assistance will be appreciated and I hope everyone is having an enjoyable Labor Day Weekend!

#ContainerNormal {
	width: 1250px;
	text-align: center;
	padding: 10px;
	background-color:#900;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	min-height: 100%;
	z-index: 5;
	margin-left: 50%;
	position: absolute;
}

[Dormilich]

delete the position statement and use margin: 0 auto; (auto-margin for left & right)

[Atli]

Hey.

Is there any reason why the element is absolutely positioned? Normally, to center a block element, you set the width and then use auto margins to center it.

Try something like:

#ContainerNormal {
	position: relative;
	width: 1250px;
	margin: 0 auto;

	/* etc... */
}

If you do have a reason for keeping it abslutely positioned, you can use the left and margin-left styles to manipulate it into place.

#ContainerNormal {
	position: absolute;
	width: 1250px;
	left: 50%;
	margin-left: -625px;

	/* etc... */
}

The left: 50% style pulls the left edge of the element to the center of the screen. The margin-left: -625px style pulls the element half its width further to the left, effectively centering it. Just remember to always adjust the margin-left value to match half the width value.

[bangkwi]

use (margin: 0px auto;) instead of (margin-left: 50%;)

[AnalyticLunatic]

Atli, on 02 September 2012 - 11:16 AM, said:

Hey.

Is there any reason why the element is absolutely positioned? Normally, to center a block element, you set the width and then use auto margins to center it.

Try something like:

#ContainerNormal {
	position: relative;
	width: 1250px;
	margin: 0 auto;

	/* etc... */
}

If you do have a reason for keeping it abslutely positioned, you can use the left and margin-left styles to manipulate it into place.

#ContainerNormal {
	position: absolute;
	width: 1250px;
	left: 50%;
	margin-left: -625px;

	/* etc... */
}

The left: 50% style pulls the left edge of the element to the center of the screen. The margin-left: -625px style pulls the element half its width further to the left, effectively centering it. Just remember to always adjust the margin-left value to match half the width value.

Thanks for the reply Atli. I am using the position: absolute because otherwise the div is not stretching correctly for the content and the background-color falls short of the end of page.

I have tried using the left: 50%; and margin-left: -625px; but have not had any luck with that working as I believe that it should. Attached is the css using that method and the residual effect on the page.

Any ideas?

#ContainerNormal {
	width: 1250px;
	text-align: center;
	padding: 10px;
	background-color:#900;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	min-height: 100%;
	z-index: 5;
	position: absolute;
	left: 50%;
	margin-left: -625px;

	}

Also, here is the result of the position: relative, width: 1250px, and margin: 0 auto :

#ContainerNormal {
	width: 1250px;
	text-align: center;
	padding: 10px;
	background-color:#900;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	min-height: 100%;
	z-index: 5;
	position: relative;
	margin: 0 auto;

	}

Also, here is my html, body css. Would there be any conflicts?

html { 
	background: url(../images/BlackBoardStyle.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
}

body {
	height: 100%;
	position: absolute;
}

This post has been edited by AnalyticLunatic: 02 September 2012 - 12:00 PM

[Atli]

OK, I see. The position: absolute; on the body element would be causing problems with both of the methods I suggested. An absolutely positioned element is essentially taken out of the normal flow of elements, which is not what you want to do with the body element. Both the left: 50%; style and all of the margin styles mentioned here depend on the body element covering the whole width of the page, which it won't if you leave it like it is.

I suggest you simply remove the position: absolute; from the body element. It serves no purpose there in any case.