Using CSS to absolute position an object relative to the inside of a center aligned container.

I wrote this article about 2 years ago. Our creative department at work ran into this problem last week, so I’ve decided to republish the article in blog format. The title is a mouth full, but I think it sets up the tutorial appropriately. :) Enjoy.

Introduction

Horizontally centered websites have long been extremely popular. However, positioning an element using “position:absolute” in a center aligned website can be tricky. This tutorial walks you through the process using only CSS, and without the use of tables or complicated image splicing.

Why would you want to use absolute positioned elements in a center aligned layout? Such a technique allows you to place an image or navigational button on top of your current design. I use this technique on gnourg.com.

Unfortunately, an element that is absolute positioned in a center aligned container does not maintain its position relative to its container. Instead the absolute positioned element maintains its position relative to the window. This has the potential to blow the sites intended layout.

-Click here to view an example of the problem.
Hint: resize the window’s width.

Fortunately there is a solution to this problem.

Setting up our scenario

We use an image as our element to absolute position. But before we can position our image, we must create our center aligned container.

To center our website we create a div wrapper that contains all of the elements in the website, including our absolute positioned image. The CSS for our div wrapper appears as follows:

#wrapper {
   margin: 1px auto;
   padding: 0;
   border: 2px solid black;
   width: 580px;
   height: 300px;
}

Placed in our HTML, including all of the proper definitions, it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Absolute positioning tutorial.</title>
<meta http-equiv="Content-Type" content="text/html;
   charset=ISO-8859-1" />
<style>
#wrapper {
   margin: 1px auto;
   padding: 0;
   border: 2px solid black;
   width: 580px;
   height: 300px;
}
</style>
</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

Putting in the image

Our goal is to absolute position our image 200 pixels from the left border of our div wrapper and 30 pixels from the top border of our div wrapper. It will hover over any content beneath it.

We start off by simply placing the image in our div wrapper as follows:

<body>
<div id="wrapper">
<img src="sample.gif" height="50" width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

It is important that we place our image tag first inside the div wrapper, before any of the page’s other content.

Now we absolute position our image so that it does not take up space on our page. This should place our image in the upper left hand corner of our div wrapper, on top of our content. The CSS for this looks as follows:

<body>
<div id="wrapper">
<img src="sample.gif" style="position:absolute" height="50"
   width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

Final position

Now that our image takes up no space, and because it is placed before any of our page’s other content, it sits nicely in the top
left hand corner. From here we move our image by putting it in a div box and using relative positioning. It looks
like the following:

<body>
<div id="wrapper">
<div style="position:relative;top:30px;left:200px">
<img src="sample.gif" style="position:absolute" height="50"
   width="100" alt="our img" />
</div>
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

Eureka, we have our absolute positioned object positioned relative to the inside of our center aligned website.

-Click here to view the final product.
Don’t forget to try resizing the window’s width.

This method has been tested in IE 5, IE 6, Netscape 6, and Mozilla 1.6. If you have any questions, corrections, or additions please drop me a comment.

This entry was posted in Web & Software Development and tagged , . Bookmark the permalink.

31 Responses to Using CSS to absolute position an object relative to the inside of a center aligned container.

  1. matija says:

    hey – this has been pissing me off forever, and I found your workaround. very helpful, thank you!

  2. Jeroen says:

    Hi,

    Your solution seems to work, except I get a positional discrepency between IE7 and the latest version of Firefox. The absolute positioned image in IE7 seems to be lower and further to the left. Haven’t figured out the solution yet.

    Thanks.

  3. Chris says:

    Thank you very much! Just what I needed :)

  4. nycpicasso says:

    This is great! I have spent 2 days trying to get this until I found your tut. One thing, my div tag has a long line to the right of it(right of the image)that makes a horizontal scroll in firefox, opera and I haven’t tried it in ie yet. Any ideas why this is happening?

  5. Mathias says:

    Yeah!!!!

    Great… Just what i needed!
    Have been trying to make a dropdown menu for hours now and this is just what i needed!!!

    Perfect! Thanks!

  6. Phil says:

    This is cool – is there any way of doing this when the div is placed at the bottom of the wrapper div?

    I have a banner that I would like to load at the end of the page, then repositon to the top, so that the banner code loads after the rest of the content.

    Any ideas for this?

  7. Stevo says:

    This worked great for me, thanks alot.

    Instead of creating a new div with a relative position I just declared the wrapper as relative, works fine in IE7 and Mozilla.

  8. Shane says:

    This problem has plagued me sooooo long.. but i finally fixed it! Thanks to you, snad some changes… here’s what finally worked, without using the #wrapper…

    Within and at top of one of the content id’s () i did this…

  9. Pingback: div bei variabler Spaltenbreite absolut positionieren - XHTMLforum

  10. Durand says:

    Thanks a lot, worked like a charm!

  11. Stefan kLooTCh says:

    That was explained exactly as I needed it to be explained to me. Thanks bRoth3r!

  12. Felipe Hardt says:

    Perfectly done. Thank you very much.

  13. Stine says:

    Worked like a charm! Thank you!
    Have read numerous of tut the last few days, yours were just what I needed :-)

  14. melonjuny says:

    You saved my life! This is exactly what I have searched for 12 hrs! Worked like a charm!
    Perfect! Great! Beautiful! Excellent!
    Reagan. You’re the Best! Luv ya!

  15. Amanda says:

    Thank you so much for this! Exactly what I was looking for and worked like a charm!

  16. Dennison Uy says:

    This works, but the parent container / wrapper of my variable-height, absolutely positioned element does not stretch vertically to accommodate it. Any solutions?

  17. James says:

    Thank you very much Dusty – a simple solution that I never knew existed has solved a major design problem for me!

  18. Mike says:

    Thanx dude. Works nicely.

  19. Patrick says:

    Presently reworking my website and was hoping there was a way to do this. Perfect — I’ll be floating at least two images in relatively absolute space with the method you’ve provided.

    Thanks a heap!

  20. Patrick says:

    oh, btw, if you apply a negative z-index, you can position your image behind instead of in front of the container div’s content, while -ve left and right values can be used to position images outside of or overlapping the border of the container div.

  21. AdamTam says:

    Thanks, this has been absolutely helpful!

  22. Jon says:

    Thanks man! I’ve been struggling with this for a long time!

  23. Zac S. says:

    Thanks so much!!!!!!!!!!! I couldn’t find this solution ANYWHERE. Lifesaver.

  24. Jon M says:

    Man, that was EZ! So simple. Thanks Dusty for writing this and thanks Google for helping me find it so quickly!

  25. This solution looks great, but is it possible to get the border to stick to the bottom of the page without specifying a height and also keeping the position relative? By the way I read your goals page and the goals are awesome.

  26. Lorenzo Gunn says:

    First time I have seen this. Like some others the problem was making me crazy. Then I found your post. Excellent tutorial! Easy to follow. Thanks a lot!!!

  27. Daniel G says:

    The only useful post I have ever seen about the margin setup.

    I was having problems because the way I was doing a site in which a wanted to use a div as the main container and get the scroll capability on it and not on the body tag. The problem was because all browsers show the content as it had been cut when they were aligned to the left inside the div. On the iOS platform the problems couldn’t being fixed.

    With this tutorial, I was able to set the divs with cross-browser support without any problem.

  28. This is gonna be one of these posts that gets attention years into the future. I’ll bet your getting a bunch of people arriving trying to make their themes responsive :D

  29. Thank you! We’re trying to use this technique to place an image that spans slightly outside the div (negative positioning) I’m going to try and get that working now.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>