On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.
In Joen’s daily work, he needs to centre a div horizontally. Usually this is easy. It gets a little trickier when using absolute positioned elements.
The method I use is to have a wrapper div with the following css:
.wrapper {
position:relative;
margin:0 auto;
text-align:left;
width:whatever;
}
For good measure, you’ll need to apply the IE fix:
body { text-align:center; }
And yes indeed, the “text-align:left” of the wrapper makes sure the text aligns to the left again.
Now you’re free to absolutely position the content using the wrapper as reference point. This is due to the fact that an element with position:relative applied to it forces every element inside it (the so called child element) to use the parent as reference, not the viewport (the part of the browser in which a web page is displayed). You could say it resets the reference point of it’s children elements.
This means you can still use absolute positioning while centring the whole page, like so:
.content {
position: absolute;
left: whatever;
top: whatever;
width: whatever;
}
In this specific case, he needed a div to be placed over some Flash content. Good news: It works like a charm for positioning something over Flash!
So there you have it, cross browser centring of absolute & relative positioned divs working in modern browsers such as Mozilla Firefox, Opera & Safari as well as the ye olde Internet Explorer. Hope this lil’ article has been useful to you.
Feed me the entries
short, simple, effective. i want more. :)
2 years and 10 months agoWe aim to please sir…any suggestions?
2 years and 10 months ago[…] Horisontal CSS Centering for Absolute Positioning A new and better way to center your elements horisontally has been found. Read all about it on AkaXakA’s website. […]
2 years and 10 months agoI had to specify the width of the wrapper for it to work in IE6
2 years and 7 months agoAppart from that… THANKS A LOT… it’s the only solution I’ve found which works in both IE and Firefox… and it doesn’t involve any scripting !
Worked wonderfully. Thanks for sharing this awesome solution. :)
2 years and 7 months agoGood to hear guys! But remember - this is exactly what css was created (in part) to do.
2 years and 7 months agoI was looking for an answer to my CSS woes, your page provided it.
Thanks a bunch.
2 years and 6 months agoThis sounds like what I am looking for. I am almost done a site and was just asked to include a logo in the bottom right corner of each page - I would have to redesign each page if I have to use tables.
So if I understand correctly, the wrapper can be applied to my main container(a table) and then the positioning of my DIV(containing my image) will be positioned in reference to my main container(to which the wrapper has been applied)?
2 years and 4 months agoAh, the bottom-right! There’s a lot of CSS issues there in browsers.
Don’t know if it matters in tables that the [table] wouldn’t be the direct parent of the [div] you’re trying to position…depending on the design, maybe inserting the div underneath the table, clearing both the table and the div and then using a negative margin to bring it up (if needed) would be better.
2 years and 4 months agoHey James,
I’d just like to point out that I used this solution for a project at work, and it worked WONDERFULLY. It was easy, quick, and surprisingly compatible. Once I managed to wrap my mind around your solution, it was surprisingly simple. Suddenly “position: relative” makes sense to me (and I’ll be using it for every #container I create from now on).
So thanks, you’ve saved my butt today.
2 years and 4 months agoWhat about when u want to have a footer appear below these “position: absolute” columns?
Doing a “clear:both” doesn’t work.
2 years and 4 months agofirst off, thank you so much, this is a beautiful fix to a constant problem for me.
secondly though, it throws things completely out of whack in safari, and I can’t think for the life of me how to fix it.
any help would be greatly appreciated, thanks,
2 years and 3 months agoWhat happens in Safari then?
2 years and 3 months agoI’m having trouble with both relative and margin:0 auto; to work together to center the page. I’ve always seen that margin:auto and relative positioning were incompatible.
Right now I’m using the absolute position at 50% then a negative margin of half my width, but of course I ran into the problem of when the window is scaled down or when running at 800×600 resolution, I cannot scroll to the top and left due to the negative margin. any help is welcome, the work site I’m working on to fix the problem is www.ayaconcepts.com/brmt2/
2 years and 2 months agonever mind, rookie mistake =p. didn’t set my .wrapper width and height.
thanks a lot!!!
now…about vertical centering =D… haha
the journey never ends!
2 years and 2 months agoWell glad I could help!
2 years and 2 months agoHere are some “struts & springs” examples that may help people with vertical centering, fixed size gutters, etc.
.container {
position: relative;
margin: 20px auto;
background: #ff9999;
border: 4px solid green;
height: 30%;
}
#leftstuff {
position: absolute;
left: 10px;
top: 20px;
height: 50px;
background: #999999;
border: 1px solid black;
}
#middlepin {
position: absolute;
left:0%;
right: 50%;
}
#middlestuff {
position: absolute;
left: 80px;
right: 5px;
top: 25px;
background: #999999;
border: 1px solid black;
}
#rightstuff {
position: absolute;
left: 50%;
right: 10px;
bottom: 0px;
top: 0%;
background: #999999;
border: 1px solid black;
}
#centerpin {
position: absolute;
top: 0px;
bottom:50%;
border: 2px solid red;
}
#middlestuff2 {
position: absolute;
bottom: -25px;
height: 50px;
background: #999999;
border: 1px solid black;
}
blah
blah
blah
left blah, blah
middle blah, blah
right blah, blah
blah
blah
middle blah, blah
2 years, 1 month agook, well so much for that. Let’s try pre:
.container {
position: relative;
margin: 20px auto;
background: #ff9999;
border: 4px solid green;
height: 30%;
}
#leftstuff {
position: absolute;
left: 10px;
top: 20px;
height: 50px;
background: #999999;
border: 1px solid black;
}
#middlepin {
position: absolute;
left:0%;
right: 50%;
}
#middlestuff {
position: absolute;
left: 80px;
right: 5px;
top: 25px;
background: #999999;
border: 1px solid black;
}
#rightstuff {
position: absolute;
left: 50%;
right: 10px;
bottom: 0px;
top: 0%;
background: #999999;
border: 1px solid black;
}
#centerpin {
position: absolute;
top: 0px;
bottom:50%;
border: 2px solid red;
}
#middlestuff2 {
position: absolute;
bottom: -25px;
height: 50px;
background: #999999;
border: 1px solid black;
}
blah
blah
blah
left blah, blah
middle blah, blah
right blah, blah
blah
blah
middle blah, blah
2 years, 1 month agook, never mind
2 years, 1 month agoExactly what I was looking for! Very clever and it works perfectly. Combining this with appropriate use of em values, I was able to make my entire page scalable for visitors that are visually impaired. The only thing that was remaining was a text overlay I had over an image…and thanks to your clever work, it turned out perfect! Thanks!
2 years agoThis is great stuff. Thanks a lot.
2 years agoGlad to hear it!
2 years agoI’ve just worked through a problem with this approach, which led me to go back to the old way (see below)…
The problem is that, when all the page content is contained within the “wrapper” div, and that div is absolute-positioned, the browser doesn’t know where then end of the body is.
I wanted a bottom-aligned image on the body, but couldn’t come up with a way of forcing Firefox to treat the end of the document as the end of the body! (I got it to work in Internet Exploder though!!)
Only a problem if you want a bottom-aligned image, it seems..
So, I’ve resorted to this:
body{
1 year and 11 months agobackground:#f9f9f9;
background-image:url(images/bg_body.gif);
background-position:bottom left;
background-repeat:repeat-x;
text-align:center;
}
#wrapper {
width:772px;
margin:0 auto;
text-align:left;
}
Does the wrapper go on the .css file or in the css area of the page
1 year and 11 months agoWith CSS that doesn’t matter. You can put it anywhere you like!
1 year and 11 months agoThis solution sounds like it should work great and I can see that others have used it successfully. I have copied the code exactly as you wrote it and it simply will not work. I know I may simply be overlooking the obvious. I have tried adjusting the width from auto to 100% and also changing my DIVs from ID to Class since that is how you wrote it. None of this seems to work. I was wondering if perhaps the type of rollover I am using (shifting a multipart image) may be the problem. I really am at a loss but I would like to use your solution and am trying to solve this problem before I add any php or code to the page. Any help is appreciated. http://www.humdilly.com/humdilly/events/cats.php
1 year and 11 months agoI forgot to mention I am using Mozilla and have tried it in IE6 as well with no luck.
1 year and 11 months agoForgive my series of responses here but I did manage to get it to work (not perfectly tho) when I put in a width pixel range between 400 and 800. It did not work when I tried 1200px tho. Very strange.
1 year and 11 months agoExcellent. Why ever did they remove the float option in CSS :(
1 year and 11 months agoInteresting, will try it on my site, if it works, i’ll give a reply.
1 year and 10 months agoMark: Remove what float option? Of course Floating still works in CSS!
Milo: Hope you manage it!
1 year and 10 months agoWorked for me! Thanks!
1 year and 10 months agoJust exactly what I needed to know - saved me hours of tinkering. I suspect that I’ll be using this solution a lot - thanks!
1 year and 9 months agoHow did you make the div go OVER the flash again? Flash wants to stay on top for me.
1 year and 8 months agoBy adding “z-index:5;” to your rules for #content. (In this example)
1 year and 8 months agoThis is a wonderful solution. I just have a couple of caveats:
1. I need this to work consistently in FireFox, IE 6+, and Safari with a Flash element…
2. The Flash fix is great (using the z-index), but I’m trying to position a DHTML generated flyout menu over the Flash with this method. The positioning is fine, but the menu flyouts (sub’s) are a bit wonky. Your solution works beautifully in FireFox, haven’t been able to test it in IE yet, but in Safari the menu flyouts “vibrate” when crossing over the Flash. Is there anyway to fix this? I can’t ignore the Safari people…they comprise appx 15% of the visitors to my site…
FYI…the DHTML menu I’m considering using is from TwinHelix: http://www.twinhelix.com/dhtml/fsmenu/
1 year and 8 months agoJust an update to my last message…with this positioning method the DHTML menu over Flash works beautifully in IE & FireFox on a PC. But, still need to solve the Safari issues for a Mac…
1 year and 8 months agoCy: You should be able to get them working by adding z-index:5; (the number refering to a layer higher than the Flash content) to your submenu css:
ul.menu li ul {z-index:5;}
You might also need to add position:relative; or position:absolute; to them too, as they might not have it already.
Good luck!
Edit: Just saw your second message. In case you haven’t done what I’ve described above, try that. Otherwise I’ll send some guys round (now that sounds wrong) who know the trappings of Safari.
1 year and 8 months agoThanks for the response…I already have the z-index for the DHTML menu and its sub’s set to a value below the Flash. (The z for the menus is “5″ and the Flash is at “100″.) Again…works well in everything but Safari on a Mac.
If you are on a Mac and have Safari…look at the Adobe website (www.adobe.com). They are trying to do the same thing (run a menu over the Flash). Works well in everything but Safari…
Ideas? :) Thanks!
1 year and 8 months agoEh? Try giving the menus a value above Flash. (Since you want the submenu’s over the Flash, right?)
1 year and 8 months agoTried that already…the menu opens behind the Flash…which I don’t want it to do… Ideas?!? :)
1 year and 8 months agoSorry! Totally mispoke earlier… the z-index for the Flash is at “5″ and the menus and their subs at “100″, so that the menus are on top of the Flash.
1 year and 8 months agoYou have put “[param name=”wmode” value=”transparent”] ” in your html for the flash object, right? (or opaque instead of transparent)
1 year and 8 months agoYes, I have it set to ‘transparent’. For kicks, I also tried ‘opaque’ and it made no difference…
1 year and 8 months agoYour best bet is a bit of JavaScript. Veerle’s got an article on it: Experimenting with Flash Content and z-index
1 year and 8 months agoHi! :)
Thanks for the information, very helpful! :)
now… just got to fix the other IE problems that I am having… hope it’s just the z-index around the wrong way…
Is it easier/better to create a page for IE or fix it for IE last?
1 year and 7 months agoIt’s far easier (eventually) to fix for IE last. Any other way and all the code gets mucky. ;)
Also, just to be clear, a higher z-index means it’ll go *above* something with a lower z-index.
1 year and 7 months agoHi James,
Thanks for the information. The problem was the divs had to be 100% height (and a couple of other little things) to look correct - I just assumed that it was the z-index as it looked like another div was covering it up.
Now I’ve got to look into having a seperate style sheet for printing the page, which sounds like fun! :)
Must create for IE last… Else code gets mucky… Must learn from this mistake… MUST REMEMBER!!!! :)
1 year and 7 months agoRan accross your centering DIV info today. Been looking FOREVER for a way to keep centered content from “exiting left” when the browser window was less wide then the content…
Your way is THE BEST!
1 year and 7 months agoThanks.
This is very helpful but at the same time as centering this DIV i need to also make it 100% height. So the relative wrapper kills my idea in this case.
1 year and 7 months agoSimilar to what Sandra is trying to do i think!
Any thoughts?
Yes, sadly “position:relative;” does kill that. The only way to get (minimum) 100% properly is with a table, or with a div that acts like one. Which is easy enough, as you can just slap a “display:table” onto it - but. Of course, there is a but, as IE6+7 (and before) don’t support it.
The other way is to give the #content a “position:fixed” & “height:100%”, and to have the other content scroll under it. Depending on your design this may look really cool or really awful.
This is, however, the oldest problem of CSS, so you might better helped by looking up a ready-made CSS page with 100% height, and applying what you’ve learnt here to that.
Good luck Anton & Sandra!
1 year and 7 months agoIf there were no problems, designing and developing websites would be easy… but not as fun & interesting! :)
I did get the 100% height to work. I needed 100% height so that the background image continued to the bottom of the page. It’s working, but there is a gap at the end of the page and you scroll to see nothing but the body’s background colour. I’m going to compare the gap’s size to the padding and margin measurements and see if that’s got anything to do with it.
I’ll sumarise the code and post it if you’d like.
BTW: I had a different z-index problem. The logo in the top left corner has a transparent lower corner and that was covering the top of the content section, blocking the use of links and also highlighting. That’s all fixed now! :)
1 year and 6 months agoHi again,
I fixed the gap, that was simple. The 100% height works in IE but not FF… which probably means that it doesn’t really work… I think. IE takes you to mean 100% of the page length (no matter how long it is), but FF thinks 100% of the window height.
Back to square one… again.
1 year and 6 months agoBrilliant! Thanks very much for blogging this, saved me lots of tinkering as well.
1 year and 6 months agoThanks for this trick. It addresses exactly the problem I am having with creating flyout menus on a centered page design. It works like a charm in IE but I cannot get it to work in Firefox. I haven’t seen any reports of the same problem in the previous responses… so what am I missing? Any suggestions?
1 year and 6 months agowhy is fixed positioning meant to be so good when you cannot write a paragraph of text and float and image around it. Think about it. It means its so stupid! Unless there is a way?
1 year and 5 months agooh hang on you can by using class names. HO HO HO, whoops
1 year and 5 months agoWell there you go, ‘annoyed’!
Dana: Glad it was of use to you.
Gary: You probably missed giving your container (the thing you’re centring) a width; that’s the most common mishap anyway ;)
1 year and 5 months agoThanks for the response James. I do have the width defined both as part of the css rule and in the html table tag (the table being the container). I have been experimenting with the placement of the content div either directly in the table an in td’s (with the wrapper class applied) but the same result in firefox. It all works great in IE, though. :( Here is the relevant css I am using. Any other thoughts?
.wrapper {
position: relative;
margin: 0 auto;
text-align: left;
width: 800px;
}
.wilcMenu {
1 year and 5 months agoposition: absolute;
top: 25px;
left: 29px;
background-color:#663333;
width: 100px;
height: 20px;
z-index: 10;
color: #ffffff;
}
Ha Ha…. Spare the wrapper, spoil the child!
Thank you…. god!? Now I need to cipher what the “IE fix” is all about. But anyway, you rule ;p
1 year and 3 months agoThank you Zed, glad to know I could help you out :)
1 year and 3 months agoheeey!
1 year and 3 months agothanks alot!
works perfect!
Helena: Great!
Gary: Have you given your flash (assuming it flies out over that) a lower z-index? And could you link to an example?
1 year and 3 months agoThis is a great solution, thanks for sharing!
1 year and 2 months agoWhile implementing this CSS I was trying to place a DIV under the wrapper and found it very hard to do. The only solution I came up with was to create another DIV position:absolute; and give it top:125%; (or a value greater than 100%). The problem I encounter is that different browsers interpret the top percentage value differently and I can not get consistent positioning across different browsers on win/mac machines. Is there a solution for this?
Does anyone have the same problem as I with this in FireFox (v2.0.0.4)? It works fine if the width of the browser is a bit bigger than the wrapper, but if not it’s like the wrapper has a margin and gets “stuck” when you minimize the browser too much.
This page has that same error from my computer anyway.
1 year, 1 month agoBtw; the scroll is left outside the minimized area, and that is a big problem I think…
1 year, 1 month agoI want to center the container(wrapper) div while its height should be 100% and should cover the screen area vertically… i have done something like this..
container {
background-color: #78C1FE;
height: 100%;
position: absolute;
width: 774px;
text-align:left;
}
#header {
background-color: #0099FF;
height: 150px;
width: 774px;
}
#logo {
float: left;
height: 150px;
text-align: left;
width: 50%;
}
#logoright {
float: right;
height: 150px;
position: fixed;
text-align: left;
width: 50%;
}
#content {
background-color: #78C1FE;
height: 100%;
width: 774px;
}
#footer {
background-color: #FF9900;
height: 80px;
width: 774px;
}
body {
margin-left: 0px;
margin-top: 0px;
text-align:center;
}
but the thing is it does not work… i also want the footer div to stay at the bottom of the page (please refer the properties of footer div in the css) while the content are should cover the rest of the space (so i have set its height to 100%) while it should leave 150px height to header… it works but scroll bar comes up which i don’t want.
please help
1 year agoSain, I think the solution you want is more than adequately explained over at 456 Berea Street: CSS Frames v2 Full Height by the most esteemed Roger Johansson.
1 year agoStfn: To combat that you make sure that the wrapper includes a margin. (Unlike this site at present, yes.)
1 year agoCan anyone tell me how to get an image to be center and absolute at the bottom of the window? :)
I’m having a tough time getting it, I’m pretty new at CSS :(
When I position: absolute;
and bottom: 10px;
it will do it and hang out there at the bottom perfectly, but I can’t get it centered :(
any help would be great!
10 months, 1 week agoZach: put a “position:relative;” on its containing element (which could be the body element or some div which holds the image).
Then add “margin: 0 auto;” on the element you’re trying to get in the centre at the bottom.
That should do the trick!
10 months, 1 week agoOkay, I have been looking all over the internet and still have yet to find an answer to my question. I am looking to center a div, this post does show how to do it, the problem is that I also want the page wrapper/container to have a height of 100% even when the content doesn’t fill the screen. I can do this by using the position: absolute so the height: 100% has something to scale to, but when I use an absolute positioning I can no longer use the margin: 0 auto.
So, may question for the masses is this: How do you center a div element and make it’s height truly 100%? I could do this with javascript, but I’m looking for a 100% CSS solution.
If you can answer this, I love you…
Thanks in advance :),
Shaun
PS - I don’t want to use the negative margin trick.
10 months agoThis solution helped really helped me!
9 months, 1 week agoI’d tried relative positioning, negative margins…
This one really did the trick, and I’ve been looking for this kind of solution for some time.
Thank you kindly!
Your solution appeared too simple to fix [what seemed to be] a complex problem. Boy, was I wrong! All of my problems have been solved with just 3 new lines of CSS. Wish I’d found you hours ago!
Thank you very much James, you are a lifesaver.
Cheers,
9 months, 1 week agoGary
Shaun: A container within a container *should* do the trick.
Jordefamn & Gary: You’re both very welcome!
9 months, 1 week agoThanks alot! I was messing around with this for two days now.
Jens
7 months and 2 weeks agoworks gooood !!!! XD Thanks!
4 months and 2 weeks agoThank you thank you thank you thank you.
4 months and 2 weeks agoThat’s been bugging me for hours now…