• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 232
  • Last Modified:

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.
0
wilflife
Asked:
wilflife
  • 9
  • 6
  • 5
  • +1
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 TomoskyTechnology ConsultantCommented:
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
 
Dave BaldwinFixer 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
 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 6
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now