How To Center The Div in FireFox

Posted on September 14, 2007

In the world of CSS there can be many headaches getting your page to do what you want.  Today let me show you a trick that will save you some time getting your site to look the same in IE and Firefox.  If you try to center a wrapper div on a page you may run into some issues with FireFox.  I discovered a fix online and I hope this helps you as well.  In short here is the solution:  

Change the margin from margin: 0px; to margin: 0 auto; 

When you make that change this will give the div an auto left and right margin. Combined with your div width this will cause it to center.  

The following is some will create a div tag with the width of 600 px and will center.  

<style>
#container
{
text-align: center;
}
#containercontent
{
width: 600px;
text-align: left;
padding:0px 0px 0px 0px;
margin: 0 auto;
}
</style>
<div id="container">
<div id="containercontent">
Test 123</div>
</div>

Enjoy!

spread the joy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Facebook
  • Technorati
  • YahooMyWeb
  • del.icio.us
  • bodytext
  • E-mail this story to a friend!
  • StumbleUpon
  • NewsVine


 Subscribe in a reader




Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

1 Comment so far
  1. div center page June 13, 2008 1:42 am

    [...] may run into some issues with FireFox. I discovered a fix online and I hope this helps you as well.http://www.coolwebfinds.com/how-to-center-the-div-in-firefox/CSS floating div - center on page : div, center, page, floating, cssHi, Is it possible to make the [...]