Solved

center 100% div

Posted on 2011-03-12
21
226 Views
Last Modified: 2012-05-11
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
Comment
Question by:wilflife
  • 9
  • 6
  • 5
  • +1
21 Comments
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116242
Why do you need the "position:absolute" in there?  That is what is doing it.
0
 

Author Comment

by:wilflife
ID: 35116275
take that out and it is doesn't work in the browsers i have tested.
0
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116289
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
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!

 

Author Comment

by:wilflife
ID: 35116308
body{
margin:0px;
padding:0px;
background-color:#C3F;
        height:100%;
      
      
      
}
0
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116331
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
 

Author Comment

by:wilflife
ID: 35116354
No doesn't work. Do a quick html you will you see it.
0
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116395
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
 

Author Comment

by:wilflife
ID: 35116476
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
 

Author Comment

by:wilflife
ID: 35116494
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
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116516
Ok.

I use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
 

Author Comment

by:wilflife
ID: 35116573
Hmm, starts to fail when you put that in as well. Hmm.
0
 
LVL 39

Expert Comment

by:Aaron Tomosky
ID: 35116611
Try margin-left:auto;margin-right:auto;
0
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35116651
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35116694
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
 

Author Comment

by:wilflife
ID: 35116730
Fails in ie 6,7 and 8.

0
 

Author Comment

by:wilflife
ID: 35116741
Fails as soon as you use 100% in the you goti div.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35116743
Works perfectly in IE8 for me.  Why do you say it's failing?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35116755
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35116772
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
 

Author Comment

by:wilflife
ID: 35116834
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35116974
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

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Send email using HTML and PHP in separate file 5 36
Use Mid in Html 6 21
close pop up windows when logout or main window closes 17 38
title attribute 5 22
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question