Ninique's Minidollz

Tutorials- Absolute Positioning for Centered Layouts

Has it ever happened to you to show your site with a centered layout to someone else and the other person says "It looks all messed up on my computer! The content isn't on top of the background!" while on your computer it looks fine? Why does this happen?

abspos_demo

Basically, the problem resides in the way things are positioned on the page. The picture above nicely illustrates what goes on. A lot of people make their layouts for their own screen size only. They center the background on the page, but then use absolute positioning to place all the other layout elements. When viewed in a larger screen, the background shifts to the right so that it can stay centered on the page, while the content, being positioned in relation to the top-left corner, stays there.

So how do you prevent it from doing that, and construct a centered layout the right way? That's what I'll try to explain in this tutorial.

NOTE: This is not a beginner CSS tutorial: I'm assuming that you already know the basics of making a layout in HTML/CSS. I'm also assuming that you already have created a background created for your layout.

  1. step 1

    Start with the basic HTML markup for your page. In this example I'm using something really simple: The title in an H1 tag, the main content area in a div called "content" (this would theoretically contain either an iframe or actual content, but I'm just filling it with a paragraph for this example), and the navigation in a ul list:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Demo Doll Layout</title>
         <link rel="stylesheet" type="text/css" href="mystyle.css" charset="utf-8">
    </head>
    <body>
         <h1>Demo Doll Layout</h1>
        
         <div id="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
        
         <ul id="nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="dollz.html">Dollz</a></li>
              <li><a href="bases.html">Bases</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="links.html">Links</a></li>
         </ul>
    </body>
    </html>
  2. step 2

    In your CSS (for this example, this is in a separate file called mystyle.css), add the background picture and center it to the middle of the page. I also put some basic colour and font styling in the screenshot at the right, the code for which I'm not including here because it's beyond the scope of this tutorial.

    body {
         background: url(DemoBG.png) center center no-repeat fixed;
    }
  3. step 3

    Before we start aligning stuff, we have to put a container div around all the content. This is so that we can position this div first, then position everything else in relation to it.

    <body>>
    <div id="container">
              **everything that was inside the <body> tag before**
    </div>
    </body>

    At this point, I find it useful to put borders around everything so that you can see better what's going on. You can remove those after you're done the layout.

    div, h1, ul {
    	border: 1px solid black;
    }
  4. step 4

    Now to put all the content in the center of the page on top of where the background is. Start by making the width and height of the container div the same as that of your background image. Then use absolute positioning to place it at 50% of the page.

    #container {
    	width: 766px;
    	height: 510px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    }
    
  5. step 5

    As you see, the previous step put the top-left corner of the container smack in the middle of the page. But we want the whole thing to be centered. To do that, we'll shift it back using negative margins. Make the top margin the negative of half of the height and the left margin the negative of half of your width (It's better if your width and height are even, but if you have odd numbers, just round it off)

    #container {
    	....
    	margin-top: -255px;
    	margin-left: -383px;
    }
    
    
  6. NOTE: If you need to center your layout horizontally only (and not vertically), you can use this CSS for your container div and background image instead of the above steps. It's shorter and slightly easier than the above but it doesn't work for centering vertically. The "position: relative" part is for the next step to work.

    body {
         background: url(DemoBG.png) center no-repeat;
    }
    
    #container {
    	margin: 0px auto;
    	position:relative;
    }
  7. step 7

    We can now position the actual elements on top of the areas for them in the background. Now because the container div was set with absolute positioning (this also works with relative positioning), everything that you'll position absolutely that is inside of it will be use the top-left of the container div instead of the top-left of the page as the origin. This way, it won't mess up on other screen sizes.

    h1 {
    width:522px;
    height:66px;
    position: absolute;
    left: 122px;
    top: 24px;
    text-align: center;
    }
    
    #content{
    width:452px;
    height:235px;
    position:absolute;
    top: 122px;
    left: 144px;
    padding: 10px;
    }
    
    #nav {
    width:512px;
    height:28px;
    position:absolute;
    top: 401px;
    left: 123px;
    margin: 0px;
    padding: 5px;
    text-align: center;
    list-style-type: none;
    }
    
    li {
    display: inline; 
    margin: 0px; 
    padding: 0px 10px;
    }
  8. step 8

    Once you're done positioning everything, remove the code for putting borders. Now try to resize the window and see that the content always stays on top of the background.

If you want to see the coding for the whole layout, you can view my demo page and its CSS.