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> </p>
</div>
</div></div></div>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER