Full Height and Centered.

[LukeV]

Hi guys I'm working on a web template but I'm having some trouble getting a div to stretch to 100% height and keep it centered.This is the design: LinkI'm referring to the little grey part just outside the white content area.This is the css I'm using for that grey part:

	      #backdrop {	text-align: center;	position: absolute;	background-color: #626262;	width: 850px;	height: 100%;	margin: auto;}

The "margin: auto;" doesn't seem to be making a difference though since the box keeps shifting to the left.Any help?

[webflex]

Hi,Try margin: 0 auto;. If it doesn't work maybe that's because the position: absolute.Can you put the code online just for us to see how the situation is?Complements \o/

[Ingolme]

In order for it to work you need the html and body elements to also be 100% high. And to center it in all browsers you must give its parent a centered text-align property.Backdrop can't be centered if you give it an absolute positioning. So remove that.

html,body { height: 100%; }#parent_of_backdrop { text-align: center; }#backdrop {text-align: center;background-color: #626262;width: 850px;height: 100%;margin: 0 auto;}

[LukeV]

margin: 0 auto; didn't work.Yes you are right I should've linked my work in the first place. Here it is: link

[Ingolme]

Remove "position: absolute" from the #backdrop object.And you better initialize the html and body elements like this:html, body {padding: 0;margin: 0;height: 100%;}If not, 100% of the element will go beyond the height of the screen.

[webflex]

Hi,Try the solution of Ingolme. That's because the position element.Complements \o/

[LukeV]

Ok guys I tried your suggestions and although I did get the box centered it's not quite 100% height. Any ideas why?

[webflex]

Hi,Add this to your code:

* { margin: 0px; padding: 0px; }

This will put all your margin and padding to 0.Complements \o/

[LukeV]

Hi webflex. I added that code and it didn't seem to have made much of a difference.

[webflex]

Hi LukeV,The problem is in the ID content and your margin property.You have two margin propertys .Complements \o/

[Ingolme]

You've spelled "margin" wrong in your stylesheet: " magrin: 0; "

[webflex]

Hi, I also have seen that you used two propertys height in the header ID. Never repeat a property in an element.Complements \o/

[Ingolme]

Repeating properties doesn't really matter. It won't change anything. You just need to remember that only the last one written will have priority.

[LukeV]

Hey thanks webflex you where right!Alright now I can get started ^^thanks for the helpEDIT: Yes I suppose Ingolme is right as well.