How do I center div tags?

I am trying to center the layer on the screen and it isn't working. Any ideas? I also need it to extend fluidly to the content.
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
body {
	background-color: #ccecf3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin:0px;
	padding:0px;
	text-align:center;
}
* {
	margin:0;
	padding:0;
}
a {
	font-size: 12px;
	color: #009fc2;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #009fc2;
}
a:hover {
	text-decoration: none;
	color: #009fc2;
}
a:active {
	text-decoration: none;
	color: #009fc2;
}
#container {
	position:relative;
	left:0px;
	top:0px;
	width:960px;
	height:750px;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
}
.bl {
	position:absolute; 
	background: url(images/bl.gif) 0 100% no-repeat #ffffff;
	width: 75%;
}
.br {background: url(images/br.gif) 100% 100% no-repeat}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
-->
</style>
</head>

<body>
<div class="container">
  <div class="bl"><div class="br"><div class="tl">
      <div class="tr">
        <p>BODY CONTENT HERE</p>
        <p>&nbsp;</p>
      </div>
    </div></div></div>
    </div>
</body>
</html>

Open in new window

LVL 2
kallestieAsked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
To center it, change the CSS like so:

.bl {
      background: url(images/bl.gif) 0 100% no-repeat #ffffff;
      width: 75%;
        margin: auto;
}

Any div with a width and margin: auto will center.
0
 
kallestieAuthor Commented:
Thanks! That worked! :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.