1. Home
  2. Forums Index
  3. Browser Side / CSS 1:21 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Help - centering issue

page not centering

         

kiwidesign

2:14 am on Oct 3, 2005 (gmt 0)

10+ Year Member



Hi all,

I am near tearing my hair out with this one. I have a page set up and want it to appear centered on any res.
When I contain it in a div and center the div it seems to ignore the containing div.

What am I doing wrong?

#header {
position:absolute;
left:0px;
top:15px;
width:795px;
height:176px;
z-index:1;
}
.navtxt {font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-size:12px; text-align:center; background-color:#999999;}
#leftnav {
position:absolute;
left:0px;
top:188px;
width:140px;
height:398px;
z-index:2;
}td img {display: block;}

.navside{
padding-top:2px;
background-image:url(images/vlines.jpg);
background-repeat:repeat-y;
z-index:1;
}td img {display: block;}td img {display: block;}
#Curve {
position:absolute;
left:139px;
top:187px;
width:656px;
height:428px;
z-index:3;
background-color: #CCCCCC;
}
#Layer1 {
position:absolute;
left:212px;
top:217px;
width:522px;
height:398px;
z-index:4;
}
-->
</style>

<div id="header">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/header.jpg" alt="Image" width="795" height="150" /></td>
</tr>
<tr>
<td><table width="795" border="0" cellpadding="0" cellspacing="0">
<tr class="navtxt">
<td width="35%">Drainage/Excavation &amp; Driveways</td>
<td width="1%"><img src="images/vdivide.jpg" alt="divide" /></td>
<td width="53%">Effluent Proposals/Septic Tanks &amp; Lifestyle Blocks </td>
<td width="2%"><img src="images/vdivide.jpg" alt="divide" /></td>
<td width="9%">Contact</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="leftnav">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="51" bgcolor="#999999">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#999999" align="center"><table border="0" cellpadding="0" cellspacing="0" width="121">
<!-- fwtable fwsrc="left nav.png" fwbase="left nav.jpg" fwstyle="Dreamweaver" fwdocid = "667647522" fwnested="0" -->
<tr>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="120" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td colspan="2"><img name="leftnav_r1_c1" src="images/leftnav/left nav_r1_c1.jpg" width="121" height="1" border="0" id="leftnav_r1_c1" alt="" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td rowspan="6"><img name="leftnav_r2_c1" src="images/leftnav/left nav_r2_c1.jpg" width="1" height="103" border="0" id="leftnav_r2_c1" alt="" /></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','navbar1','Home','images/leftnav/Home_f3.jpg',1);" onmouseover="MM_nbGroup('over','Home','images/leftnav/Home_f2.jpg','images/leftnav/Home_f4.jpg',1);" onmouseout="MM_nbGroup('out');"><img name="Home" src="images/leftnav/Home.jpg" width="120" height="26" border="0" id="Home" alt="" /></a></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="26" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><img name="leftnav_r3_c2" src="images/leftnav/left nav_r3_c2.jpg" width="120" height="11" border="0" id="leftnav_r3_c2" alt="" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="11" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','navbar1','Contact','images/leftnav/Contact_f3.jpg',1);" onmouseover="MM_nbGroup('over','Contact','images/leftnav/Contact_f2.jpg','images/leftnav/Contact_f4.jpg',1);" onmouseout="MM_nbGroup('out');"><img name="Contact" src="images/leftnav/Contact.jpg" width="120" height="26" border="0" id="Contact" alt="" /></a></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="26" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><img name="leftnav_r5_c2" src="images/leftnav/left nav_r5_c2.jpg" width="120" height="12" border="0" id="leftnav_r5_c2" alt="" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="12" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','navbar1','Furtherinfo','images/leftnav/Furtherinfo_f3.jpg',1);" onmouseover="MM_nbGroup('over','Furtherinfo','images/leftnav/Furtherinfo_f2.jpg','images/leftnav/Furtherinfo_f4.jpg',1);" onmouseout="MM_nbGroup('out');"><img name="Furtherinfo" src="images/leftnav/Furtherinfo.jpg" width="120" height="26" border="0" id="Furtherinfo" alt="" /></a></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="26" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><img name="leftnav_r7_c2" src="images/leftnav/left nav_r7_c2.jpg" width="120" height="2" border="0" id="leftnav_r7_c2" alt="" /></td>
<td><img src="images/leftnav/spacer.gif" alt="" name="undefined_2" width="1" height="2" border="0" id="undefined_2" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="272" bgcolor="#999999">&nbsp;</td>
</tr>
</table>


</div>
<div id="Curve"><img src="images/curve.gif" alt="curve" width="34" height="34" /></div>
<div id="Layer1">
<table width="100%" border="0">
<tr>
<td><div align="center"><strong>!Content!</div></td>
</tr>
<tr>
<td height="62"> <div align="center">!content!</div></td>
</tr>
<tr>
<td><div align="center"><img src="images/truck1.gif" alt="Truck" width="350" height="247" /></div></td>
</tr>
<tr>
<td><div align="center"><img src="images/needs.gif" alt="needs" width="416" height="34" /></div></td>
</tr>
</table>
</div>

createErrorMsg

2:44 am on Oct 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Where is the container div and what CSS are you using to center it?

cEM

kiwidesign

2:50 am on Oct 3, 2005 (gmt 0)

10+ Year Member



sorry, It's not shown on there
I tried
(a)
<div id="box">

#box {
width:800px;
left:50%;
margin-left:-400px
}

(b)
<table width="100%" align="center">

(c)
<div id="box" align=center">

#box {
width:800px;
margin-left:auto;
margin-right:auto;
}

fish_eye

2:53 am on Oct 3, 2005 (gmt 0)

10+ Year Member



Is the behaviour the same on all browsers?

===== 


body { text-align: center; }

...does the trick for me in IE coupled with 

#box { width: 800px; margin: 0px; }

for Firefox.... and I haven't tested on other browsers 


<body>
<div id="box">

createErrorMsg

3:21 am on Oct 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



(a)
<div id="box">

#box {
width:800px;
left:50%;
margin-left:-400px
}

Add position:absolute to the above and it should kick in.

cEM

kevinoneill

5:50 am on Oct 3, 2005 (gmt 0)

10+ Year Member



At worst, just use 


<CENTER></CENTER>

But if your dying for CSS to do it, I'd agree with the adding Absolute positioning to it, as stated. GL.

xfinx

9:04 am on Oct 3, 2005 (gmt 0)

10+ Year Member



what about this:

<div id="bla"> this box needs to be centered
<div class="col">this is col</div>
</div>

div#bla {
position: relative;
width: 200px;
margin: 0 auto;
background: #f00;
}
div.col {
position: absolute;
top: 10px;
left: 2px;
background: #0f0;
}

fish_eye

9:43 am on Oct 3, 2005 (gmt 0)

10+ Year Member



Sorry - hopeless error in my post... it should've been: 

body { text-align: center; }

...does the trick for me in IE coupled with 
#box { width: 800px; margin: [b]auto[/b]; }

for Firefox.... using 
<body>
<div id="box">

kiwidesign

8:01 pm on Oct 3, 2005 (gmt 0)

10+ Year Member



Thanks so much for all your help. It is now working splendidly.

xfinx

6:01 am on Oct 4, 2005 (gmt 0)

10+ Year Member



Well, what solution did you use?

kiwidesign

7:49 pm on Oct 4, 2005 (gmt 0)

10+ Year Member



sorry i used:

#box{
position:absolute;
width:790px;
left:50%;
margin-left:-400px;
margin-top:20px;
padding-left:5px;
height:615px;
z-index:1;
}

<div id="box">

</div>

gldweb

10:23 pm on Oct 4, 2005 (gmt 0)

10+ Year Member



Let me throw out a solution that I use that seems to work for me:

body {
text-align: center;
}

#centerpage {
width: 780px; /*enter the appropriate width for your page*/
margin: 0px auto;
text-align: left;
}

xfinx

6:02 am on Oct 5, 2005 (gmt 0)

10+ Year Member



Yes that is less typing..

You can even use sth like this:

#boxwrap {
text-align:center;
}
#box {
display: table;
width: 200px;
}

fish_eye

6:08 am on Oct 5, 2005 (gmt 0)

10+ Year Member



You'll need the 

margin: auto;

in the #box if you want it to work on non-IE browsers

If you want less typing (and less <div>s), this works: 


body { text-align: center; }
#box { width: 800px; margin: auto; }

gldweb

4:26 pm on Oct 5, 2005 (gmt 0)

10+ Year Member



What I have found is that if you use the "text-align: center;" declaration in the body selector you will need a "text-align: left;" declaration in the #box selector. Unless of course you want to have all the text on the page center aligned.

Gene_B

3:19 am on Oct 6, 2005 (gmt 0)

10+ Year Member



I use this to center the main container without centering the text. I use percent to make the pages resizable.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
...
<STYLE TYPE="text/css">

#contain
{
height:100%;
margin-left:6%;
margin-right:6%;
}

</style>

<BODY>

<div id="contain">

put everything in this container

</div>

fish_eye

6:13 am on Oct 6, 2005 (gmt 0)

10+ Year Member



I'm still learning about all this stuff - which is why I'm taking such a keen interest and testing each suggestion :)

Gene_B - your solution works fine so long as you want a fluid width. It does not work for a fixed width (without the inclusion (somewhere) of the "text-align: center" (for IE - with the corresponding fix to "text-align: left") and "margin: auto" (for non-IE)).

Nice option for fluid width pages though - thanks.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:21 am May 2, 2026