Basic Css Help - How to Center A Div

Atomic · 6 Jul 2008 at 19:23

I am officially an numpty...

I've gone through Google and tried various things and still no luck.

So here's my situation. I want to create a single Div that can contain a 400px by 300px image. I want it to be workable on all browsers.

The current code allows me to center width wise, but it's always at the top of the screen.

Any help, please?

XHTML:

</head>
<body>
<div id="wrapper">Web Page Under Construction</div>
</html>

Css:

body {
margin: 0;
padding: 0;
text-align: center;
background-color:#CC0000;
color:#FFFFFF;
}
#wrapper {
position: absoloute;
width: 400px;
margin: 0 auto;
}

Atomic · 6 Jul 2008 at 19:32

Sic said:
take position: absolute out of your #wrapper and put a strict DTD in there

Done the first part, but unsure what you mean by the second. You mean Document Type Declaration in the Xhtml?...Still not working.

xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Index Page</title>
<link href="/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">Web Page Under Construction</div>
</html>
</body>
css:

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
text-align: center;
background-color: #CC0000;
color:#FFFFFF;
}
#wrapper {
width: 400px;
margin: 0 auto;
border-color:#CCFF33;
}

</html>

Atomic · 6 Jul 2008 at 19:41

Sic said:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">@charset "utf-8";
    /* CSS Document */

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #CC0000;
    color:#FFFFFF;
    }
    #wrapper {
    width: 400px;
    margin: 0 auto;
    background: #f0c;
    border-color:#CCFF33;
    }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Index Page</title>
<link href="/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">Web Page Under Construction</div>
</html>
</body>
</html>

works fine here

Sic, I've used that code and it's centered but it's at the top of the screen - I want it slap bang in the middle of the browser window. I don't get what's wrong :/

Basic Css Help - How to Center A Div

Atomic

Atomic

Atomic

Atomic

Atomic

Atomic