center 100% div

Hi, how do you center a div that is 100% this doesn't work:

#yougotit{
      width:1000px;
      background-color:#FFF;
    /*set the width and height to 100% of the screen*/
      position:absolute;
    height:100%;
      margin-left:auto;
      margin-right:auto;
      
}

Must be something stupid i am missing.
wilflifeAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Here's the code for 100% height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
} 
-->
</style>
</head>
<body>

<div id="content">the content</div>

</body>
</html>

Open in new window

0
 
GeoffHarperCommented:
Why do you need the "position:absolute" in there?  That is what is doing it.
0
 
wilflifeAuthor Commented:
take that out and it is doesn't work in the browsers i have tested.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
GeoffHarperCommented:
What do you have surrounding the <DIV> ?  The 100% is 100% of whatever is surrounding it (i.e. if you have another <DIV> or <TABLE> that is 50% of the height of the browser, then the <DIV> at 100% will be 50% of the screen).
0
 
wilflifeAuthor Commented:
body{
margin:0px;
padding:0px;
background-color:#C3F;
        height:100%;
      
      
      
}
0
 
GeoffHarperCommented:
Where is the width?  If you don't put a width:100% in the body css the the div will just show up in the center of the screen, I believe.
0
 
wilflifeAuthor Commented:
No doesn't work. Do a quick html you will you see it.
0
 
GeoffHarperCommented:
So, the below doesn't do what you want?

<html>
<head>
<style type="text/css">
body
{
	margin0px; 
	padding0px; 
	background-color:#C3F;
	height100%; 
} 
#yougotit
{
	background-color:#FFF;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>
<body>

<div id="yougotit">Hello</div>

</body>
</html>

Open in new window

0
 
wilflifeAuthor Commented:
Let me play with it a little. I needed to remove the position and then i get it centred i am losing the 100% height now though as i have other divs., let me look at it.
0
 
wilflifeAuthor Commented:
Hmm, it stops working when you put the

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

in... hmmm... i typically use that as i have found cross browser it is better.
0
 
GeoffHarperCommented:
Ok.

I use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
 
wilflifeAuthor Commented:
Hmm, starts to fail when you put that in as well. Hmm.
0
 
Aaron TomoskySD-WAN SimplifiedCommented:
Try margin-left:auto;margin-right:auto;
0
 
GeoffHarperCommented:
Sorry, I meant 4.0 transitional.  Also, I don't know what happened to some of the colons in my code post.  I'll try this again.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<style type="text/css">
body
{
	margin:0px; 
	padding:0px; 
	background-color:#C3F;
	height:100%; 
} 
#yougotit
{
	background-color:#FFF;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>
<body>

<div id="yougotit">Hello</div>

</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
Note that "height:100%;" only works when you have a defined height enclosing it and making the body 100% isn't enough.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<head>
<style type="text/css">
body
{
        margin:0px; 
        padding:0px; 
        background-color:#C3F;
        height:100%; 
} 
#yougotit
{
        background-color:#FFF;
				border: thin solid black;
				width:900px;
        height:300px;
        margin-left:auto;
        margin-right:auto;
}
</style>
</head>
<body>

<div id="yougotit">Hello</div>

</body>
</html>

Open in new window

0
 
wilflifeAuthor Commented:
Fails in ie 6,7 and 8.

0
 
wilflifeAuthor Commented:
Fails as soon as you use 100% in the you goti div.
0
 
Dave BaldwinFixer of ProblemsCommented:
Works perfectly in IE8 for me.  Why do you say it's failing?
0
 
Dave BaldwinFixer of ProblemsCommented:
If "you use 100% in the yougotit div.", then it uses 100% of the screen.  It does what you ask it to.  What were you expecting or looking for?
0
 
wilflifeAuthor Commented:
Apologies dave missed your addition, was commenting on the previous post, the key is your html 100% and then all the details with type of doc header is not important. Took awhile but got there appreciate your input.
0
 
Dave BaldwinFixer of ProblemsCommented:
Actually, getting the DOCTYPE right makes a difference in how the page is interpreted.  This is true in IE even more than the other browsers.  There are a number of things that IE simply doesn't do if you don't have a correct and complete DOCTYPE.  Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.