Jump to content

Full Height and Centered.


Recommended Posts

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?

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...