Centering with marin auto in IE vs. Firefox

I’m trying to create a site in CSS but the pages look fine in IE but the centering isn’t working in Firefox. I thought all i had to do was use the margin: 0 auto;
to make it work but so far it only works correctly in IE. Does anyone have any ideas? Thanks.

http://www.eisforeric.com/canceronmymind/final/reviews.html

Hi,
Your page is centered in FF :slight_smile:

Try clearing your cache.

As long as your using a width (which you are) auto margins will center the page.

hi,

thanks for replying. but on firefox version 3.6.13, it’s not centered. i emptied my cache, checked it out on another computer and the problem is still the same. There is a small gap on the left side of the page and a bigger one on the right. It’s even in IE, but not in firefox. any ideas please?

Are you talking about the #header and #text? If so, Firefox is doing it correctly. The float menu is ignored in computing the margin. To make those elements ‘see’ the float, give them either {display: table;} or {overflow: hidden;}. IE<8 is taken care of by the width property triggering hasLayout. IE8 and 9 should act as Firefox. (I don’t have IE for testing available at the moment.)

cheers,

gary

I suspect you are talking about the blocks of text, .header and .text not being centered in the yellow part of your page.

You have floated the sidebar, which removes it from flow of the document, and thus now .header and .text fill up 100% of the .wrapper.

If you want to get it to center in the yellow part, add a <div class=“main-wrapper”> around .header and .text, and style it to be

.main-wrapper {
  padding-left: 170px; /* same width as your sidebar */
}

I like visual representations.
Floats and automargins:
Assuming the box to be centered has Layout (which it will because you need a width to center it), and assuming this box does not have Gary’s display: table or overflow: hidden

The float is like a Post-it note to the modern browsers. The body of the float is “above” the rest of the page… the centered box’s margins just don’t see it.

Gary’s answer explains what’s happening and the solution. :slight_smile: (and Stomme shows a good visual representation ;))

e.g.


.text,.header{overflow:hidden}

Once you apply overflow other than visible then the element creates a rectangular block to the side of the float and the auto margins will now center it in the available space. (If visible overflow is needed then display:table could be used but they may also have adverse effects depending on situation)

IE6 and 7 have the same effect when the element is in haslayout mode which they already are with the dimensions already applied.

Materialdesigners method above would also work but has the downside that any element that is set to clear in the right column will actually also clear the whole left side column and push all the content down the page. You would need to nest another element inside this container and float it with a 100% width to avoid this issue.

However, in a two column layout you should revise your logic and create two separate columns of appropriate width and float one to the left and one to the right and avoid all the issues above. You just stack content inside each float as required and they will work as expected. The only thing then to remember is to make sure that #main contains a clearing mechanism (such as overflow:hidden again or one of the other methods if visible overflow is required).

thanks for the replies. it works perfectly now.