Center Absolute Position DIV
development, DIV
Centering a div on the screen with absolute position is something may at first seem very complicated, but with a little thinking and simple addition to the position element you can easily center an absolute position div in the middle of the screen.
This can be helpful for creating a wrapper to contain and center the contents of your entire site on the page.
Lets say that you have a simple page like this:
<div id="xyz_main">
<div id="xyz_header"> Header </div>
<div id="xyz_body"> Body </div>
<div id="xyz_footer"> Footer </div>
</div>
And you wish to center the ‘main’ div in the center of the page as an absolute position center div. You can do this by adding the following positional style attributes to the ‘main’ div:
#xyz_main {
width: 140px;
border: 1px solid #666666;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
}
By setting the left position to 50% it will set the div to start in the center of the screen. By adjusting the left margin by a value half of the size of the div we are centering, we can move the entire div to the left and place it directly in the center of the page.
Your page would now look something like this:
That’s it! That is all you have to do to center an absolute position div on the page… Enjoy!
NOTE: I have added a new CSS Template Cheats section to the site. This new resource has even more compliant methods of centering DIVs.
Seems it doesn’t work in IE
Comment by Alex — October 16, 2006 @ 8:28 pm
What version of IE are you seeing this problem in? If you let me know that I can find a solution. I know it works in most versions of IE.
Comment by zacheos — October 22, 2006 @ 12:13 pm
Great little work around. Works perfect.
I’ve looked for a solution with out resorting to tables for a while. Thank you.
Comment by Leandro — January 27, 2007 @ 7:26 pm
For me it works in IE6 but not Firefox 2. Firefox 2 seems to treat 50% as 50% of the body’s width.
Comment by Zort — February 15, 2007 @ 2:30 pm
I n g e n i o u s !!!
Comment by Ricardo — February 17, 2007 @ 11:38 pm
Nice trick, i’ve tried figuring something out for a while, and this works perfectly. Thanx for the solution.
Comment by Hal — February 27, 2007 @ 7:52 am
doesn’t work if the exact width is not known, eg. if you try this with percentages in IE6 it will break. can be got around using expressions though
Comment by Bob — April 8, 2007 @ 6:50 am
i have ie7 and firefox 2 and it works great. thanks!
Comment by chikalin — April 17, 2007 @ 9:13 am
Great little tip, works a treat for me in Firefox 2.0.0.3 on Fedora Core 6. Cheers – Callum.
Comment by Callum — April 23, 2007 @ 3:01 am
Thanks for this! You just saved me a lot of time. For others…I tested this on FF for Mac, Safari, FF for PC & IE 6 and is fine in all.
Comment by Deanna — May 18, 2007 @ 8:03 am
THANK YOU SO MUCH!!!
Comment by Jenn — June 15, 2007 @ 6:27 pm
im not an expert but im curious why use this solution over just using margin: 0 auto on a non absolute positioned div? Won’t it still center it?
Comment by RIPPER — June 27, 2007 @ 1:53 pm
Thank you so much! This was my one sticking point with CSS positioning and now my designs are unlimited. Seems to be solid in all browsers I can test too
Comment by Blair — August 23, 2007 @ 3:10 am
This is the only solution i find in the web, but, what happens when you dont know the size of the div? i want to position a variable-width div in the center of the page. That’s not so simple, huh?
Comment by Joan — September 7, 2007 @ 11:44 am
How about using tag to bypass all these issues?
Comment by Neil — October 21, 2007 @ 1:01 am
beautiful tip!
Comment by biffs — November 14, 2007 @ 8:00 pm
Much appreciation for this excellent tip!!!
Comment by Don — December 2, 2007 @ 10:20 am
Great solution EXCEPT…
Minimize the window to smaller than the div and the left side gets eaten up (I assume because of the negative margin) and isn’t accessible through scrolling. Thoughts anyone? Sorry to be the rain on the parade. If I had a solution I’d share it. True for IE6, IE7 & Firefox 2.
Comment by Ross — December 12, 2007 @ 7:24 pm
Awesome. Thanks.
Comment by Kris — January 7, 2008 @ 10:09 am
Did not work. Moved the entire Div to the right of the center point. I can’t believe Div layers were designed with no consideration of centering them without some gimick!
Comment by Steve — January 11, 2008 @ 5:47 pm
Thank you so much – I’d been having problems with some z-indexed divs in IE that had to be centered and positioned absolutely to work properly and you have solved my problem. Thanks for making my Friday!
Comment by Amy — February 14, 2008 @ 9:04 am
Works fine in IE7 and FireFox.
Thanks!
Comment by Marcel — February 19, 2008 @ 3:13 am
Hi,
A bit late, but…
Ross is right – minimizing the window eats left side. This could be fixed by
#xyz_main {
width: 140px;
border: 1px solid #666666;
text-align: left;
position: absolute;
top: 0px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Of course 140 is just an example – 900 works also
Regards,
Comment by Grimm — March 12, 2008 @ 9:33 am
THANK YOU! So easy. Fix above works great!
Comment by hilary — April 4, 2008 @ 12:26 pm
Awesome! Works perfectly and everything without knowing or having to find out screen resolutions.
Thx a lot!
MSc
Comment by MSc — April 17, 2008 @ 10:24 am
ur a friggin genius. You just saved me about a million hours on category1games.com. I love u
Comment by Neal — May 12, 2008 @ 1:29 pm
It is realy does not work in IE 6. Too bad
Comment by Vitaly — May 19, 2008 @ 8:11 am
I spent hours trying to figure out how to do this until I stumbled across your site.
THANK YOU SO MUCH!!!!
Comment by Mark — May 22, 2008 @ 8:52 am
Great for FF, can’t get it to work in IE6
Comment by agallers — June 8, 2008 @ 2:35 pm
Look…. this just DOES NOT work! It works in FF3 but not in IE 6. I am so tired of this css crap. I have spent hours reading at least 10 different tutorials on this and most them say “We did it!” Damn do they ever test their stuff in IE?
Going back to tables for good. CSS was a nice idea, but unfortunately totally useless in real life.
Comment by Jack — June 14, 2008 @ 4:20 am
ok, this i know, but, how do i positionate a DIV that have a height less than screen height, on the middle of vertical align?
Comment by no_matter — June 15, 2008 @ 7:22 am
To center a DIV vertically, you can actually use the exact same method. Just set the “top” position to 50% and add a “margin-top” of -Xpx (where X equals one half of the DIV height).
I see many people saying this does not work in IE6. I just tested this now myself. I had no problem getting a very simple test HTML page to center in IE6 using this method.
Can someone with this trouble please elaborate on your issues?
Comment by zacheos — June 17, 2008 @ 12:28 pm
Just tried it and it seems to be working in IE 6, IE 7, Firefox 3 and Safari 3.1.1 just fine. It also validates too. Thanks!
If any of you are having problems with it just double-check that you make the margin-left negative and HALF of the container’s width.
Comment by MoDaD — June 29, 2008 @ 3:26 pm
You are correct MoDaD… This trick does work in almost every browser out there. I think that some of the people having trouble may also have been using improper DOCTYPE and sending IE6 into quirks mode. I have written a little post on this issue over here.
Comment by zacheos — June 30, 2008 @ 6:23 am
nice one m8
Comment by HT — July 4, 2008 @ 10:00 pm
Hello Zacheos and MoDad,
It is true that centering an absolute div on a page is not that hard using the above techniques. But what if you want to center (vertically) the div at a page that is very long. If you click at a link soemwhere at the bottom of the page it will open the div centeren on the page, but because it is extremely long, you won’t see it immediately and have to scroll to it.
At (http://)florida.greatestdivesites.com/divesites/list_of_all_movies‘ we have a list of movies. If you try to click one of the lowest movies you see what I mean. Do you know a way to center it on the page where you currently are.
Lars
Comment by Lars — July 23, 2008 @ 8:48 am
Halo Lars,
Mein Deutsch ist nicht so gut. Aber, ich verstehe ein wenig.
I took a quick look at your site and because you have many of your comments in German, and much of the markup is obfuscated, it was difficult to find the problem.
Perhaps you could post the location of the code, or the actual code, you are currently using to position the AJAX pop ups?
Comment by zacheos — July 24, 2008 @ 7:36 am
Doesnt work in IE7
CSS is a disaster. It shouldnt take hours of blog post searching to find some f*$%ing code to center a div.
Comment by jc — August 24, 2008 @ 11:54 pm
jc -
This trick does work in IE7, but you have to make sure you are using the proper DOCTYPE or else IE will go into quirks mode. Read more about quirks mode and proper DOCTYPE here.
ALSO – Be sure to check out my collection of CSS template cheats. I have several starter templates there that use a centered DIV without using the above trick.
Comment by zacheos — August 25, 2008 @ 5:55 am
Thanks a million for sharing this method. You saved me.
Jack, hang in there with the CSS. Eventually it will click, and you’ll never look back.
Comment by Studiostein — September 5, 2008 @ 9:07 am
Thank you so much! no one else has any clue about this! It saved me having to redesign my site with tables!
Thanks 700 billion!
Comment by Magical John — September 23, 2008 @ 4:58 pm
Nice site… Glad I could help!
PS: Love the 700 Billion reference
Comment by zacheos — September 23, 2008 @ 5:32 pm
Thanks!
I was working on this problem, had found another way, but it didn’t work in IE. Your method works great all around!
Comment by Charlie — October 20, 2008 @ 1:18 am
THANK YOU, THANK YOU, THANK YOU …. I have spent days trying to figure this out!!!! I hate Dreamweaver!!! (I am actually still learning it and still learning div’s) I am a table guy
Comment by Charles Wedemeyer — November 6, 2008 @ 6:50 am
Hang in there… Once you make the switch to div- and css-based layouts, you will not look back.
Comment by zacheos — November 6, 2008 @ 6:55 am
this works except when the window size is reduce. It causes everything to the left side to practically disappear… i tried what “grimm” suggested but it did not work and apparently there is still people using weird sizes under 600px… now why? i don’t know and i don’t care but i still need a solution… this was an almost solution probably the closest one.
Comment by Jane doe — November 12, 2008 @ 5:12 pm
Depending on your needs, you may have some luck working from one of my CSS template cheats: http://www.zachgraeve.com/css-cheats/ They are not centered with absolute position, but you may find this solution works better for your needs.
Comment by zacheos — November 12, 2008 @ 6:55 pm
This is great, but I am not sure why it is really needed. If you have your whole webpage container set to a specific width, say 980px and you use margin: 0 auto, this will center your site.
If you want to add a floating div within this site, you need to have your absolute position within a relative position. Than you can float it to any specific area that you would like within that site.
This works in all major browsers.
The only reason I really see a need for this is if you want your div moving with the scroll. This can be pretty annoying for users.
Comment by Jamie Larsen — November 22, 2008 @ 4:56 pm
Mostly true… However, IE does not recognize margin:auto when in Quirks Mode. Read on for more info on Quirks Mode and DOCTYPE usage.
Comment by zacheos — November 23, 2008 @ 12:08 pm
Thanks for this workaround! I was making myself nuts trying to do this and your workaround is perfect!
Comment by brandi — November 26, 2008 @ 11:14 am
thats a great trick!!! thank you!
Comment by ktsixit — December 19, 2008 @ 2:15 am
I don’t know if I’m missing something, but when I set the left to 50% it makes the page NOT centered. The screen will move all the way over to the right side of the screen. Whats going on?
Comment by Abby — January 2, 2009 @ 11:43 am
You may want to change the word Abosulte for Absolute!
Comment by David Clark — January 3, 2009 @ 7:45 am
Very nice… After all this time and this many comments you are the first to notice the obvious typo! Thanks for letting me know.
Comment by zacheos — January 5, 2009 @ 7:05 am
You must make sure you also set the margin-left to half the size of the DIV and make it a negative number: (i.e.: margin-left: -70px;)
Comment by zacheos — January 5, 2009 @ 7:07 am
Thanks, that did the trick!
Comment by Abby — January 5, 2009 @ 7:17 am
Awesome thanks man!
Comment by Scott — January 21, 2009 @ 8:04 am
Thanks, this really helped me out.
Comment by Chris — February 4, 2009 @ 11:07 pm
Thank you so much for posting this no matter how old it is!
Comment by Linda — March 16, 2009 @ 11:17 pm
Works in FF 3.07 not in IE 7…
In iE7 it breaks the page, div will not display
Comment by mike — March 19, 2009 @ 11:45 am
It does work… But you have make sure you are using the proper DOCTYPE. If you are not using the correct type, IE goes into quirks mode and this will break the page.
Comment by zacheos — March 19, 2009 @ 12:38 pm
Yes I read that, let me double check…
Comment by Mike — March 20, 2009 @ 4:06 am
Weird… one of my divs will center and the other one is slightly off-center! I can’t figure out why. (Tested in several browsers and getting the problem consistently)
Here’s my markup:
#globalNav {
background-image: url(images/dm-nav-bar.png);
background-repeat: no-repeat;
padding: 0px;
height: 159px;
width: 1000px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
top: -24px;
overflow: hidden;
z-index: 2;
left: 50%; /* For centering */
margin-left: -500px; /* For centering */
}
#content {
position: absolute;
background-color: #6f8489;
background-repeat: repeat;
padding: 12px;
width: 936px;
border: 1px solid #000000;
top: 0px;
overflow: auto;
z-index: 1;
left: 50%; /* For centering */
margin-left: -468px; /* For centering */
}
So does anyone know why the #globalNav div centers and the #content div is off? Because I am stumped.
I would use the “auto” method for centering except that since the positioning is absolute I can’t. I am about ready to say screw the CSS and bust out the tag!
Comment by QA — March 26, 2009 @ 11:34 pm
Without seeing the page in question I am going to make some guesses here. I think you are missing a major point. This centering hack should be used, as you have done, to center your main wrapper div. However, once the wrapper is centered and placed where you want it, you should use natural positioning within it. In other words, you don’t need to use absolute positioning for the content div. It is already contained within the main wrap.
Comment by zacheos — March 27, 2009 @ 8:56 am
Hey zacheos,
Thanks for the reply.
I figured out that my centering issues were a result of having padding on my second div. If you are going to pad the left or right of the div you need to correct for this by further decreasing the margin value.
So in your example that would mean where it says margin-left: -70px; if you wanted to have a padding of 10px on each side of the div you would need to subtract 10 more from that so that it becomes -80px.
If anyone is encountering this problem, I hope that helps.
Comment by QA — March 27, 2009 @ 11:21 am
That makes some sense… I typically do not pad container level objects for that exact reason. Be sure you are checking your work in IE, FireFox and Chrome. IE handles that box padding differently than the others. Not sure how advanced you are, but take a look at my CSS cheats: http://www.zachgraeve.com/css-cheats/
If you view the code for any of these samples, you will see how I hack the CSS to display block level elements with padding the same way in all browsers.
Good luck with your designs…
Comment by zacheos — March 27, 2009 @ 11:36 am
Thanks a lot..
I could also center align an absolutely positioned Div element.
It worked in FF 3.0.8 and in IE 7
Comment by Lakmal — April 15, 2009 @ 3:22 am
Thank. You.
This has been killing me for a while since I was using the auto margin left and right method. Does not work in IE 7 with absolute.
Comment by Allan — April 15, 2009 @ 7:38 pm
thanks !!
working good.
Comment by alon — April 19, 2009 @ 1:22 am
[...] to absolute and use a negative margin, half the width of the div you want to float, like so Center Absolute Position DIV | marketing . web . design __________________ — Pete Morley, Graphic Designer. View my portfolio – Add me on [...]
Pingback by CSS - transparent Backgrounds - UK Graphic Design Forums | UK Website Design Forums — April 23, 2009 @ 8:45 am
Thanks a lot! Works nicely, and very simple.
Comment by Chris — April 23, 2009 @ 11:11 pm
This is a BRILLIANT idea I never thought of. Thank you very much! It helps a lot.
Catzie’s last blog post… Some changes…
Comment by Catzie — April 29, 2009 @ 8:00 am
You rock!
Comment by matt — April 29, 2009 @ 6:53 pm
Brilliant!! This is exactly what I was looking for! So glad you posted this.
Comment by chris — May 4, 2009 @ 8:01 am
Thank you very much for this information, it is extremely beneficial and cross browser compatible. We do look forward reading more of your posts.
Comment by FusionIT.com.my — May 18, 2009 @ 10:50 pm
Brilliant! Works like a charm…been looking for a fix on this for a while!
Gregg Blanchard’s last blog post… I’m Stumped: Can You Help?
Comment by Gregg Blanchard — May 21, 2009 @ 12:08 pm
[...] Center Absolute Position DIV | marketing . web . design Great help when trying to center absolutely positioned divs with css (tags: css reference web positioning) [...]
Pingback by Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? — May 21, 2009 @ 6:14 pm
I am guessing that #content is off by 6 pixels. And this is because you have padding of 12px. But you are only setting the margin to half the width — not half the (width+pad)
Comment by ds00424 — June 1, 2009 @ 7:18 pm
Did this and it F$%^&ED UP EVERYTHING THAT WAS NESTED INSIDE MY “CONTENT”!!! Now my content is about 100-200px off to the left of my large div depending on screen resolution
Comment by warren — June 4, 2009 @ 5:20 am
Thank you! This is a great tip!
Comment by mike — July 6, 2009 @ 11:57 am
#content
{
width:50%;
position:absolute;
top:100px;
left:25%;
margin-left: -70px;
}
tested this in both firefox(3.x) and safari(3.x)
why width:140px?
why left: 50%?
Comment by Ryan Morales — July 9, 2009 @ 8:30 pm
Hey guys,
Where the width of the container element is unknown (eg a full page width) you need to tell the target element IE6.
left:auto;
Comment by Jordan Moore — July 29, 2009 @ 2:42 am
The point is to be able to position it absolutely from the top, but center it horizontally.
Comment by Owen — August 5, 2009 @ 1:23 pm
Good solution, but doesn’t work on IE7.
Comment by Owen — August 5, 2009 @ 1:42 pm
I’ve got this working in IE6, IE7 and IE8. I thought it might be the lack of a proper DocType that was throwing others off, but that doesn’t seem to be the problem.
Kudos on this solution!
Comment by Nai — August 13, 2009 @ 10:43 am
thanks so much – simple, clear and effective explanation! I just spent hours trying to work this out through various google searches. Very much appreciated!
Comment by Richard — August 20, 2009 @ 8:14 am
Works like a charm, thank you!
Comment by Linus Forsell — August 21, 2009 @ 3:59 pm
Very nice. Thanks for the help
Comment by Zach — September 9, 2009 @ 7:12 am
Hey this solution works great in IE8, Chrome, FF, Safari! I was having issues centering a div over a Myspace page (div.topheader) and my earlier code was working great in all browsers except for IE8! My particular issue was solved by setting the div to an actual width (not 100%), setting left to 50% as you do here, and then setting my margin-left to half of the width. Works like a charm! Thank you!
Comment by Nicodamus — September 26, 2009 @ 9:10 am
Thanks, Works good if we know the div size. How about for div’s for which we dont know the size….any ideas?
Comment by Raghu — September 30, 2009 @ 9:34 pm
It floors me that the powers that be think that “rotate text” and “add drop shadow to text” features are more important for CSS than the most trivial positioning constructs. I’d love to live back in ’96 before dynamically generated content so I’d always know the exact widths of my elements… but I don’t. I appreciate that you’re breaking your back to make CSS ‘usable’ for static documents; I’m just pissed off. Keep up the good work, hopefully a day will come soon when CSS works. (I’ve been saying that for a long time… it’ll happen… right?… right?)
Comment by Shawn — October 5, 2009 @ 9:52 pm
Thank you! I was thinking about javascript implementation, but your solution is much better.
Comment by freelancer — October 19, 2009 @ 8:24 am
[...] Center Absolute Positioned DIV [...]
Pingback by Great CSS Resources and Articles for Students | Resources for Web Development Students @ Robin's Blog — October 22, 2009 @ 1:25 pm
if you don’t know the width of the div, you will need two divs:
not tested:
Comment by Thomas — November 1, 2009 @ 9:12 am
oh, my post got destroyed somehow, here is another try without tags lt/gt:
div style=”position:absolute; top:50%; left:50%; border:2px solid #006;”
div style=” background-color:#C60; margin:-25% 0 0 -50%; width:200px; height:100px; “>/div
/div
Comment by Thomas — November 1, 2009 @ 9:14 am
using on ducatiadelaide.com.au thats I’m currently developing, very helpful.
You have allowed me to smoothly place the main navigation in the center of the viewport with no problems! Thanks heaps!
Nicholas Reed.
Comment by Nicholas Reed — November 4, 2009 @ 3:52 am
oh my word, i was down to my last hair to pull out! many thanks!
Comment by Derek Hyams — November 9, 2009 @ 12:10 pm
Simple, standards-compliant and cross-browser. Thank you!!
Comment by yMladenov — November 12, 2009 @ 5:40 am
Trust me Zach… u’re d Best! It works perfectly fine in IE7 and other browsers. I’ve been tryn 2 get dis for the past 8 months now! Thank you once again Zach.
Comment by Gozie — November 19, 2009 @ 10:48 am
position:absolute;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 99%;
height: 99%;
i used this and it worked in IE and FF
Comment by salmanabbas007 — December 17, 2009 @ 5:48 am
I wanted to use on my website if someone has 800×600 res instead of 1024×768
Comment by salmanabbas007 — December 17, 2009 @ 6:00 am
Nice simple solution. Works perfectly in FF3.5, IE7 and IE78. But you probably already knew that…
Comment by Dave — December 21, 2009 @ 9:12 am
When you use this technique in Chrome it seems to cut square blocks out of the background to the right and to the bottom of the centralised div. Does anyone know a fix for this?
Comment by Oliver Coquelin — January 28, 2010 @ 7:30 pm
Deceptively simple!
Thanks!
Comment by Susanne — February 8, 2010 @ 12:16 am
This was exactly what I was looking for I was trying to get a Leaderboard Advertisement at the top of my page and I couldn’t get it centered after trying for 15 minutes. This helped me so much, thanks again!
Comment by KrAzyChe3To — February 16, 2010 @ 9:00 pm
and if the width of my container is variable conform the height?
html:
css:
.main {
height: 100%;
background-color: black;
margin: 0 auto;
position: absolute;
}
My image is a square and i want its height 100% to fill the max-height of all screens. But i still want to get this centered horizontally. I’ve already tried to “align: center;” but didnt work. If any idea to solve this…
Thanks in advance.
Comment by adrianaleites — February 19, 2010 @ 1:05 pm
*html:
Comment by adrianaleites — February 19, 2010 @ 1:06 pm
never mind! problem solved:
.main {
height: 100%;
width: 100%;
background-color: black;
margin: 0 auto;
position: absolute;
}
.image {
margin-left: auto;
margin-right: auto;
display: table;
}
i created a class to my image and centered it to div. And set div dimensions for 100%x100%
Comment by adrianaleites — February 19, 2010 @ 1:47 pm
seems like IE doesn’t like “display: table”. So we have to add “text-align: center;” to main.
Comment by adrianaleites — February 19, 2010 @ 2:00 pm
brilliant, thanks!
Comment by Maya — February 20, 2010 @ 12:12 pm
If you use Grimm’s CSS code:
#xyz_main {
width: 140px;
border: 1px solid #666666;
text-align: left;
position: absolute;
top: 0px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
The IE7 problem can be overcome with the following Javascript function;
function centrePage() {
var browser = navigator.appName;
var b_version = navigator.appVersion;
var arrVersion = b_version.split(“;”);
var versionStr = “”;
var i;
for (i = 0; i < arrVersion[1].length; i++) {
if (isNaN(arrVersion[1][i]) == false) {
versionStr = versionStr + arrVersion[1][i];
}
else if (arrVersion[1][i] == ".") {
versionStr = versionStr + arrVersion[1][i];
}
}
var version = parseFloat(arrVersion[1].replace("MSIE ", ""));
var contDv = document.getElementById("xyz_main");
if ((browser == "Microsoft Internet Explorer") && (version 0) {
contDv.style.left = lSpace;
}
}
}
you then just need to call this function with “onload” and “onresize” in the body tag like so:
and it will compensate if the user is using IE7 or earlier.
Hope this helps
Comment by HuwD — March 22, 2010 @ 5:21 am
Hello, It worked perfect for me but I have litle a problem. I have a table above the footer, and it was perfect until I started to fill the table with information, the cell went dont through the footer to the end of the page, the footer didn’t contain the above information. Tha table just didn’t care about the footer. How can I fix this?
Comment by Jona — March 23, 2010 @ 7:00 pm
works great!!
thank you
Comment by naveen — March 25, 2010 @ 7:58 am
Really nice! I’ve been looking for a solution for hours now.
Thanks a lot!
Comment by magnolia — April 6, 2010 @ 4:49 am
Kinda surprised that no one has pointed this out yet (or maybe I missed it) – Do all of you really do your layouts in pixels and never want to vertically align something?
It’s a nice solution for people who do *fixed-pixel* layouts, but folks who do elastic layouts (based on percentages, which is often preferred for presentation on a variety of screen resolutions) this does NOT work WITH HEIGHTS. It does still work with percentages and widths, but from all my testing, the results are very unexpected when using something like:
height: 90%;
top: 50%
margin-top: -45%;
Comment by Lev — April 18, 2010 @ 1:36 am
thanks!
Comment by dan — April 27, 2010 @ 5:55 am
Genius man. Absolute genius (pun intended).
Comment by Shoffy — April 29, 2010 @ 12:17 pm
use strict html and padding issues are easily sorted across different browsers – without strict, MSIE and FFox use different methods
Comment by Kevin — May 19, 2010 @ 10:46 am
This works great in positioning the content.
However, if I want to use a background color or image it won't display unless I use a height – the border currently appears as a 2px high line at the top of the page??
Comment by Kevin — May 19, 2010 @ 11:04 am
Brilliant idea mate, thanks! I've always gotten stuck and annoyed trying to accomplish this effect.
Comment by Luke — May 24, 2010 @ 9:48 am
You can try this:
#centerpage {
width: 800px;
margin: 0 auto;
position: relative;
}
Just write: <div id="centerpage">content</div> and all your content will be in the middle no matter wich resolution you use. This is even shorter then the other one.
Comment by Luca — May 25, 2010 @ 7:24 pm
It seems to work fine in full screen, but when you resize the browser, part of the page will be hidden.
Comment by TJL — May 30, 2010 @ 7:54 am