homepage Welcome to WebmasterWorld Guest from 54.205.205.47
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Can't center header with margin:0 auto
djones




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved