Basic Css Help - How to Center A Div

Atomic

Atomic

Atomic

Associate
Joined
27 Jan 2005
Posts
830
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;
}
 
Sic said:
take position: absolute out of your #wrapper and put a strict DTD in there
Click to expand...

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>
 
Last edited:
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 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
Click to expand...

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 :/
 
right, sorry, I didn't realise you wanted it vertically centred, too. Sorry I don't know horizontal centering, not sure if it's possible without using tables.
 
Ive not tried centering something completely vertical before but one suggestion

firstly set the html and body in css to height:100% then for your div try setting vertical-align to middle and not sure but maybe play around with setting position to relative or something different, just see if it work.

the developer tool for firefox is pretty good so i recommend you try that out for finding outlines of divs

Gaunt
 
Vertical centering isn't a very nice thing to do. IMO it's a fault in CSS and something they should have thought of properly when setting out the standards. You could do something like this:

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 {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 50%;
	margin-top: -200px;
	left: 50%;
	margin-left: -200px;
	border: 1px solid #FFFFFF;
	}</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>

It's a bit dirty, and is untested in IE6 and FF3. Margin-top always has to be half the divs height negated, ditto with margin-left and the divs width.
 
As mentioned vertical centering is really tricky with CSS until they make something better in the standards (not holding my breath). Is there any reason you can't / won't use a table for this task? As it's extremely simple and easy with a table.

Code: 
<html>
<head>
<title>The Index Page</title>
<link href="/main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<table align="center" height="100%">
<th>Web Page Under Construction</th>
</table>

</body>
</html>
 
Try this :

Code: 
       <style type="text/css">
	body 
	{
	background-color: black;
	color:#FFFFFF;
	}
	#wrapper 
	{
	margin: 0 auto;
	background-color: #ccc;
	width: 400px;
	height: 400px;
	[B]margin-top: 15%[/B];
	}
	</style>

Play around with margin-top percentage.

I used this doctype btw:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
You must log in or register to reply here.
Back
Top Bottom