Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

center 100% div

Posted on 2011-03-12
21
Medium Priority
?
231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 84

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 84

Expert Comment

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

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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 84

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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

618 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