ansaurus

Question

Answer 1

+1 A:

The best way to center a div IMO is to to create a main div named wrapper and in css assign a margin: 0 auto; to that element.

Thus all content will be equally centered from top,left,right,bottom etc

RobertPitt 2010-05-30 03:54:03

I wrapped the divs in the code above now but it does not create a container around the divs, why not?

shinjuo 2010-05-30 04:05:12

Answer 2

+1 A:

For the browser be able to correcty center a div, you must give it some info about that div, so:

    .wrapper
    {
        margin: auto;
    }

(copied from your code) it's wrong, but:

    .wrapper
    {
        width:900px;
        margin:0 auto;
    }

Works just fine! your telling the browser that your wrapper as 900px of width and the rest the browser should split equally by the wrapper left and right side... Thus margin:auto; will provide you with nothing... needs the unit spec (for centering, use 0).

Another problem in your code is the fact that you have the content of wrapper with position absolute, and that will be rendered by the browser as elements outside your wrapper.. so, it's just like if your wrapper isn't there, so:

    .wrapper
    {
        postion:absolute;
        top:0;
        left:50%;
        width:900px;
        margin-left:-450px;
    }

This will the the browser that the wrapper is to by in an absolute position, that it is 0units from the top, and 50% of the browser's window from the left... to center it, just pull it back half of the given width, thus -450px of margin-left.

Now, your content should be set to position:relative; to be relatively positioned regarding the wrapper's position...

OK, here is your code (tested):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .wrapper
        {
            position:absolute;
            left:50%;
            width:950px;
            margin-left:-475px;
        }
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px;
            height:395px;
            background:green url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px;
            height:75px;
            background:purple url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px;
            height:75px;
            background:orange url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px;
            height:75px;
            background:yellow url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px;
            height:75px;
            background:blue url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px;
            height:75px;
            background:red url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px;
            height:243px;
            background:pink url("test_files/banner.png") no-repeat;
        }

    </style>
     </head>
  <body>
    <div class="wrapper">
        <div class="testimonials_png"> </div>
        <div class="homeLink_png"> </div>
        <div class="sidingLink_png"> </div>
        <div class="windowsLink_png"> </div>
        <div class="roofingLink_png"> </div>
        <div class="aboutLink_png"> </div>
        <div class="banner_png"> </div>
    </div>
  </body>
</html>

Zuul 2010-05-30 04:10:14

This still doesnt work. The div sits above the other divs rather than wrapping around them.

shinjuo 2010-05-30 04:15:37

When I change all the positions within the wrapper to relative they just fall to the bottom left corner.

shinjuo 2010-05-30 04:20:33

humm... didn't made any test... but let me test it... give me a minute!

Zuul 2010-05-30 04:24:41

Just tested and posted @ my previews answer... enjoy :)If it's solved, don't forget to mark my answer as the right one to close this topic :)

Zuul 2010-05-30 04:34:43

nevermind works perfectly thanks

shinjuo 2010-05-30 04:55:52

Glad I could help!! :)

Zuul 2010-05-30 05:00:43

ansaurus

tags:

views:

answers:

Centering Div in the middle of the page

related questions