TalkPHP - Centering DIV to resolution

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Centering DIV to resolution (http://www.talkphp.com/xhtml-html-css/3526-centering-div-resolution.html)

Centering DIV to resolution

Hey guys, I need to fix this problem ASAP. It's for a client.

I have a design that is about 800pixels. Im trying to center it to all resolutions in css. My "wrapper" is in the body:

<body id="wrapper">

and basically its suppose to wrap the entire body into a position where it will look centered, but its not. Here is the code:

Code:

#wrapper {

        position: relative;

        margin: 0 auto;

        padding: 0;

ive tried adding 800px as the width height and everything. I'm going crazy

First, make a div like: <div id="wrapper">.

Then apply the following css:

Code:

body { text-align: center; }

#wrapper { margin: 0 auto; }

This would center the div crossbrowser.

im looking for the entire DIV to be centered not just the text. The text where its at, its suppose to be there.

Code:

#wrapper { margin: 0 auto;width: 80% }

A width must also be defined if you would like the center the div. If you don't set one the DIV get a width of 100% like every block element would do.

The body { text-align: center } is only necessary if you want this to work in IE6.

Quote:

Originally Posted by 9three (Post 19128)

im looking for the entire DIV to be centered not just the text. The text where its at, its suppose to be there.

Like FSX said, it's a fix to get it to work in IE6.

And indeed, you have to set a width on the wrapper.

#wrapper { margin: 0 auto; width:800px; }

will work in all browsers. You dont need a text align center in the body tag. I have never done that and it always works in all browsers.

cory it worked but what I'm noticing is that its not wrapping around the other DIVs. Is it because i made them absolute?

thanks!

If want #wrapper to wrap around absolute div you got to add position: relative;
to #wrapper.

hm i did and it didnt do anything :/

Ye the absolute will position that tag in the exact location you place it no matter what. In general you should use relative, , which I believe is the default if you don't set one, and try to avoid absolute. However I say thay and sometimes it is much easier to use absolute positioning, but I wouldn't use it on a lot of different elements, It will lead to future problems. Try removing all of the absolute positioning and then going from there and see what happens.

If you all still are wondering how to do this, this is the most logic, easy and compatible way to all resolutions, browsers and OS's.

HTML code

Code:

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />



<title>Untitled Document</title>

</head>



<body>



    <div class="masterWrapper">

        

        <div class="masterContainer">

            

        </div>

    

    </div>



</body>

</html>

CSS code

Code:

@charset "utf-8";

    

    * {

    

        width: 100%;

        height: 100%;

        margin: 0px;

        padding: 0px;

        

    }



    body {

        

        width: 100%;

        height: 100%;

        margin: 0px;

        padding: 0px;

        font-size: 11px;

        font-family: Verdana, Geneva, sans-serif;

        color: #000000;

        

    }

    

        .masterWrapper {

        border: 1px red dashed;

            display: block;

            position: absolute;

            width: 100%;

            height: 100%;

            

        }

        

            .masterWrapper .masterContainer {

            border: 1px red dashed;

                display: block;

                position: absolute;

                left: 50%;

                top: 50%;

                width: 250px;

                height: 250px;

                margin-left: -125px; /* /2 width */

                margin-top: -125px; /* /2 height */

                

            }

position: fixed; works, position: relative; works as well, but the best to use is absolute

You really want to avoid the

* { width: 100%; height: 100%; margin: 0px; padding: 0px; }

Thats terrible programming. It says you want to apply that to every single tag on the page. Why would you want every tag to be like that?

The easiest way to do this is simply this

HTML

Quote:

...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="box">
content here.
</div>
</body>
</html>

CSS

Quote:

#box{ background:#333; margin:15px auto; width:960px; }

I admit that the width and so forth are totally not necessary and could completely mess up the page. As for the font-size, color and of course padding and margin, that's just general knowledge. You don't want auto-padding, you want to correct and adjust it manually.

The charset is simply the type of encoding used. ;-)