Solved

center 100% div

Posted on 2011-03-12
21
222 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
Comment Utility
Why do you need the "position:absolute" in there?  That is what is doing it.
0
 

Author Comment

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

Expert Comment

by:GeoffHarper
Comment Utility
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
 

Author Comment

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

Expert Comment

by:GeoffHarper
Comment Utility
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
Comment Utility
No doesn't work. Do a quick html you will you see it.
0
 
LVL 4

Expert Comment

by:GeoffHarper
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Ok.

I use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:wilflife
Comment Utility
Hmm, starts to fail when you put that in as well. Hmm.
0
 
LVL 38

Expert Comment

by:Aaron Tomosky
Comment Utility
Try margin-left:auto;margin-right:auto;
0
 
LVL 4

Expert Comment

by:GeoffHarper
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
Fails in ie 6,7 and 8.

0
 

Author Comment

by:wilflife
Comment Utility
Fails as soon as you use 100% in the you goti div.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Works perfectly in IE8 for me.  Why do you say it's failing?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

763 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now