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.
[update: read how to do it vertically in: vertically centring in css (without hacks and multi-line enabled).]
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.
If 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! :)
Hi 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.
Brilliant! Thanks very much for blogging this, saved me lots of tinkering as well.
Thanks 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?
why 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?
oh hang on you can by using class names. HO HO HO, whoops
Well 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 ;)
Thanks 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 {
position: 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
Thank you Zed, glad to know I could help you out :)
heeey!
thanks 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?
This is a great solution, thanks for sharing!
While 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.
Btw; the scroll is left outside the minimized area, and that is a big problem I think…
I 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
Sain, 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.
Stfn: To combat that you make sure that the wrapper includes a margin. (Unlike this site at present, yes.)
Can 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!
Zach: 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!
Okay, 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.
This solution helped really helped me!
I’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,
Gary
Shaun: A container within a container *should* do the trick.
Jordefamn & Gary: You’re both very welcome!
Thanks alot! I was messing around with this for two days now.
Jens
works gooood !!!! XD Thanks!
Thank you thank you thank you thank you.
That’s been bugging me for hours now…
arg.. I need to center a background that is randomly chosen with a javascript script… except I want it to center horizontally so if they change the width, it will keep the image centered, but i DON’T want it to stay centered vertically… and if it does, I can’t think of how to keep my other divs at the correct heights since they are smaller and they don’t change equally :S kinda sucky cuz it seems that if I use background-position center then it goes crazy in mozilla and gets stuck at the top because mozilla requires fixed attachment… but that makes the damn vertical scroll! HALP MEH! :(
Calm down.
Don’t you just want “background:#fff url(wha.jpg) top center no-repeat;” ?
Awesome post! I have read elsewhere that absolute positioning is not good for browsers that can adjust text size, as it will cause the text within the absolute divs to expand past it’s boundaries. Although I haven’t experienced this, has anyone else?
I’m looking for an alternative to using multiple floats, margins, and borders, as a way to avoid implementing several IE6 hacks. Opinions on Absolute Positioning layouts vs Float layouts would be greatly appreciated. Thanks again for the post.
Happily, that’s just not true. What I think people were getting at (or confusing with) is the case where someone sets a height & width in px, and then finds that text grows beyond that. Simply not setting the height solves that, and the problem (and solution) isn’t inheritly tied to absolute positioning anyway.
You should really avoid IE hacks completely, and use Conditional Comments (Simon Clayson’s article on targeting (different) IE (versions) is the best). This allows you to feed IE6/7/8 different margins & padding, without mucking up the rest of your code.
But to answer the underlying question of not needing to resort to different CSS for IE: The best way, still, is to avoid any margin-collapse situations, use either margin or padding on any one element. This does lead to more wrapper-divs, so it is controversial.
Another way is to simply reset the box model (so it matches IE 5s), but that has some problems too, even if conceptually it is superior.
I am using the text-align:center; wrapper method with absolute positioning in the content block of text but my page continues to hug the right side of the window.
Either I take out the absolute value part and the centering works, or I leave in both and get only top positioning (top:0px) and the content hugging the right…
.wrapper {
text-align:center;
}
.content {
position:absolute;
top:0px;
width:75%;
height:500;
background-color: #326512;
text-align:left;
padding:5px;
}
This is the code I’m using, and the browser for testing I’m using is Internet Explorer 7
You need to change “position:absolute;” a “position:relative;” for your .content, however, it’s advisable to change .wrapper to body and .content to .wrapper, as that’s essentially what you’re doing.
I’m new with CSS and am busy building my first blog template. This article helped me a lot. Thank you so much, and keep up the good work!
You’re welcome, thank you very much for your comment, it’s nice to hear that this article helped!