how do you center a div?
I'm using 2 div tags one on top of one and I'm trying to center them both on the page but it's not working and it's driving me crazy. I'm not that good with html, what exactly am I doing wrong????
</script>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:382px;
top:143px;
width:643px;
height:481px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:150px;
top:149px;
width:762px;
height:442px;
z-index:3;
background-color: #AE956C;
}
#apDiv3 {
position:absolute;
left:10px;
top:10px;
width:1000px;
height:700px;
z-index:2;
}
-->
</style>
</head>
<body bgcolor="#000000">
<div id="apDiv2" style="margin-left: auto; margin-right:auto; margin-top:auto; position: absolute; top: 125px; left: 121px; height:474px; width:753px; font:20px/26px Georgia, Garamond, Serif; overflow:scroll;"><br />CONTENT CONTENT CONTENT CONTENT....
</div>
<div id="apDiv3" style="margin-left: auto; margin-right:auto; margin-top:auto; margin-bottom:auto ; background: (backgroundimage.jpg)" ></div>
<br />
<br />
</body>
</html>
Comments
Centering:
Centering anything requires setting a width less than 100% for the container. Example:
body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}
You have the width and height so just add: margin: 0 auto;
Ron
<!--put a doctype here, preferably a strict one and html tags are good too.-->
<head>
<title>Technically required</title>
<style type="text/css">
#div1
{
margin:auto; /*ALL THAT'S NEEDED*/
/*Just so you can see them*/
height:300px;
width:300px;
background-color:green;
}
#div2
{
/*Just so you can see*/
height:300px;
width:300px;
background-color:pink;
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
<div id="div2">Div Under it</div>
</body>