CSS Forum

**AounArts** · 01-10-2011, 10:55 PM

Hi guys,
I am learning HTML and CSS now a days and I have started working on a site as making a site is best way to learn HTML and CSS.
I have a small problem.
I am not able to horizontally center my div.
I have tried almost all ways given as sticky.
When I use position: relative; it center my div in all browsers except IE but if use any other way to center my div, it simply does not show in any browser including IE.
Here is my code, any sort of help will be appreciated

CODE( That is centering in all other browsers except IE)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
div#headerbg
{ background-image:url(images/header_bg.png);
background-repeat:repeat-x;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   height:88px;
}
div#header
{
   width: 870px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#595959" link="#039BCA" vlink="#0393BC" alink="#00C3FF">
<div id="headerbg">
<div id="header">
<div id="headershade" style="overflow:hidden;position:absolute;left:1px;top:0px;z-index:0" align="left">
<img src="images/header_glow.png" id="Image2" alt="" align="top" border="0" style="width:862px;height:88px;"></div>
<div id="logo" style="overflow:hidden;position:absolute;left:0px;top:6px;z-index:1" align="left">
<img src="images/logo_05.png" id="Image3" alt="" align="top" border="0" style="width:369px;height:78px;"></div>
</div>
</div>
</body>
</html>

CODE(not showing any center in any browser)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
div#headerbg
{ background-image:url(images/header_bg.png);
background-repeat:repeat-x;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   height:88px;
}
div#header
{
   width: 870px;
   margin: 0px auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#595959" link="#039BCA" vlink="#0393BC" alink="#00C3FF">
<div id="headerbg">
<div id="header">
<div id="headershade" style="overflow:hidden;position:absolute;left:1px;top:0px;z-index:0" align="left">
<img src="images/header_glow.png" id="Image2" alt="" align="top" border="0" style="width:862px;height:88px;"></div>
<div id="logo" style="overflow:hidden;position:absolute;left:0px;top:6px;z-index:1" align="left">
<img src="images/logo_05.png" id="Image3" alt="" align="top" border="0" style="width:369px;height:78px;"></div>
</div>
</div>
</body>
</html>

**Towhid** · 01-10-2011, 11:20 PM

I didn't debug your code but I see you have a lot of position attributes. There's no need for that, to center a div all you need to do is:

HTML Code:

<style type="text/css">

#divToCenter {
   width: 900px; /* necessary */
   height: 800px; /* optional */
   margin: 0 auto; /* necessary */
   border: 1px solid red; /* not necessary, just added so you can see the div */
}

</style>

<div id="divToCenter">
   some content
</div><!-- divToCenter -->

**AounArts** · 01-11-2011, 01:31 AM

I tried that but it is not centering my div.

**jsd132** · 01-11-2011, 02:29 AM

hope this will help but avoid using to much positioning

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
div#headerbg
{ background-image:url(images/header_bg.png);
background-repeat:repeat-x;
margin: 0 auto;
text-align: center;
height:88px;
}
div#header
{
width: 870px;
position: relative;
margin: 0 auto;
}
body
{
text-align: center;
margin: 0;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#595959" link="#039BCA" vlink="#0393BC" alink="#00C3FF">
<div id="headerbg">
<div id="header">
<div id="headershade" style=""><img src="images/header_glow.png" id="Image2" alt="" align="top" border="0" style="width:862px;height:88px;"></div>
<div id="logo" style="position: absolute; top: 0pt; left: 25%;"><img src="images/logo_05.png" id="Image3" alt="" align="top" border="0" style="width:369px;height:78px;"></div>
</div>
</div>
</body>
</html>

**LadynRed** · 01-11-2011, 08:13 AM

Read our stickies - http://tycoontalk.freelancer.com/css...r-website.html

The next question is what VERSION of IE are you having trouble with? Even nasty old IE6 understood margin: 0 auto; for centering.

What the others are trying to tell you is that all that relative and absolute positioning is generally not necessary and too much WILL cause problems with IE.

**AounArts** · 01-13-2011, 01:11 PM

Quote:

Originally Posted by LadynRed

Read our stickies - http://tycoontalk.freelancer.com/css...r-website.html

The next question is what VERSION of IE are you having trouble with? Even nasty old IE6 understood margin: 0 auto; for centering.

What the others are trying to tell you is that all that relative and absolute positioning is generally not necessary and too much WILL cause problems with IE.

When I remove the absolute positioning, it just displace my whole alignment.

**LadynRed** · 01-13-2011, 03:58 PM

Then you need to learn to use floats and the normal document flow instead of positioning everything.

**AounArts** · 01-13-2011, 05:39 PM

sure i'll learn what you told first.

**maria_cooper** · 02-07-2011, 02:53 AM

try this one:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
#whole_page{
width:870px;

}
div#headerbg
{ background-image:url(images/header_bg.png);
background-repeat:repeat-x;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   height:88px;
}
div#header
{
   width: 870px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
    margin-top: 0px;

  }
</style>
</head>
<body bgcolor="#FFFFFF" text="#595959" link="#039BCA" vlink="#0393BC" alink="#00C3FF">
<div align="center" >
<div id="whole_page">
<div id="headerbg">
<div id="header">
<div id="headershade" style="overflow:hidden;position:absolute;left:1px;top:0px;z-index:0" align="left">
<img src="images/header_glow.png" id="Image2" alt="" align="top" border="0" style="width:862px;height:88px;"></div>
<div id="logo" style="overflow:hidden;position:absolute;left:0px;top:6px;z-index:1" align="left">
<img src="images/logo_05.png" id="Image3" alt="" align="top" border="0" style="width:369px;height:78px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>