1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Can't center header with margin:0 auto

         

djones

9:45 pm on Dec 16, 2008 (gmt 0)

10+ Year Member



Hi Guys

I'm a long time lurker and first time poster. This site has been great help for ages and I thought I'd post my first question. I've been trying to learn CSS but have been stumped by the following problem.

I have page set-up of 1 elastic column, header and footer. I've attached margin: 0 auto to the #container div. This centers the main content and footer divs, but not the header. Could you take a look at my CSS and see if you can spot what's causing this? I've tried to keep the code quote below to a minimum and have included the main divs and the divs I created inside the header.

Thanks greatly in advance for your help.

Dan


.oneColElsCtrHdr #container {
width: 64em;
text-align: left;
height: 48em;
margin: 0 auto;
}
.oneColElsCtrHdr #header {
height: 11.38em;
}

.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}

.header-logo {
float: left;
height: 9.44em;
width: 22.5em;
}
.home-icon {
float: left;
height: 9.44em;
width: 5.69em;
}

div.home-icon {
height: 9.44em;
width: 5.69em;
margin:0;
padding:0;
background-image:url("../");
}

div.home-icon a, div.home-icon a:link, div.home-icon a:visited {
display:block;
}

div.home-icon img {
width:100%;
height100%;
border:0;
}

div.home-icon a:hover img {
visibility:hidden;
}

.about-us-icon {
float: left;
height: 9.44em;
width: 6.94em;
}

div.about-us-icon {
height: 9.44em;
width: 6.94em;
margin:0;
padding:0;
background-image:url("../");
}

div.about-us-icon a, div.about-us-icon a:link, div.about-us-icon a:visited {
display:block;
}

div.about-us-icon img {
width:100%;
height100%;
border:0;
}

div.about-us-icon a:hover img {
visibility:hidden;
}

.services-icon {
float: left;
height: 9.44em;
width: 6.88em;
}

div.services-icon {
height: 9.44em;
width: 6.94em;
margin:0;
padding:0;
background-image:url("../");
}

div.services-icon a, div.services-icon a:link, div.services-icon a:visited {
display:block;
}

div.services-icon img {
width:100%;
height100%;
border:0;
}

div.services-icon a:hover img {
visibility:hidden;
}

.schools-icon {
float: left;
height: 9.44em;
width: 6.88em;
}

div.schools-icon {
height: 9.44em;
width: 6.88em;
margin:0;
padding:0;
background-image:url("../");
}

div.schools-icon a, div.schools-icon a:link, div.schools-icon a:visited {
display:block;
}

div.schools-icon img {
width:100%;
height100%;
border:0;
}

div.schools-icon a:hover img {
visibility:hidden;
}

.blog-icon {
float: left;
height: 9.44em;
width: 6.25em;
}

div.blog-icon {
height: 9.44em;
width: 6.25em;
margin:0;
padding:0;
background-image:url("../");
}

div.blog-icon a, div.blog-icon a:link, div.blog-icon a:visited {
display:block;
}

div.blog-icon img {
width:100%;
height100%;
border:0;
}

div.blog-icon a:hover img {
visibility:hidden;
}

.contact-us-icon {
float: left;
height: 9.44em;
width: 6.88em;
}

div.contact-us-icon {
height: 9.44em;
width: 6.88em;
margin:0;
padding:0;
background-image:url("../");
}

div.contact-us-icon a, div.contact-us-icon a:link, div.contact-us-icon a:visited {
display:block;
}

div.contact-us-icon img {
width:100%;
height100%;
border:0;
}

div.contact-us-icon a:hover img {
visibility:hidden;
}

.oneColElsCtrHdr #mainContent {
height: 27.69em;
}
.oneColElsCtrHdr #footer {
height: 9.06em;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}

djones

9:47 pm on Dec 16, 2008 (gmt 0)

10+ Year Member



Sorry, I forgot to include Document details:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

zudorsoft

11:05 am on Dec 17, 2008 (gmt 0)

10+ Year Member



Please specify: does not work at all or only in some browsers?
Also post a basic HTML-structure.
It's hard to say without seeing the HTML structure + site, but I would say it can be an IE6 problem (margin:auto is not workin' in IE<7); also I would try a text-align:center too for some of the elements. Regards.

pinguino

10:47 am on Dec 20, 2008 (gmt 0)

10+ Year Member



Hey Dan,

Zudorsoft touched on this, but have you tried setting 

text-align: center
on the header you wish to center?

I can't really picture what your page looks like, but it could be that you have centered the h1 element (i.e. the box that the text sits inside), but this makes no visible difference because it still takes up the full width of its container, and the text inside is still left-aligned.

swa66

5:36 pm on Dec 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are a few ways to center in CSS:
  • inline elements are centered with 
    text-align:center
    as mentioned above.
    This is centered in the containing block, which in case you have floats pushing the containing box aside means that it might not be centered on the page itself.
    Try adding a border around e.g. a <h1> with text-align:center that sits next to a floated image to see it in action.
    Note that children that display as block elements should not center the block (the text inside will inherit the text-align), IE6 is buggy here.
  • To center a block: give it width and add auto margins left and right.
  • You can also remove the to be centered element from the flow and e.g. use absolute positioning to center elements with 
    left50%; and margin-left:-X;
    with X half the width of the element (this centers relative to the nearest parent that has "position"
  • Another way to center absolutely positioned elements in standards compliant browsers that does not need the size of the element is e.g.: 

     img {
      position:absolute;
      margin: auto;
      left:0;
      right:0;
     }

  • there are probably more
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026