Firefox won't center div

**Jiggy1965** · 02:11 PM

I've noticed on www.meteo-in.nl that the site shifts to the right in Firefox, whereas it centers (like it should) in Firefox. Can anyone figure out why this happens?

CSS:

Code:

body {
    background-color: #7a828f;
    background: url(images/bg.gif);
    font-size: 10px; 
    font-family: tahoma, tahoma, tahoma, tahoma; 
    margin:0px; 
    padding: 0px   /* Opera 0 margin */    
    text-align: center; /* center in IE */ 
}

/* portal wrapper */
#mkwrapper {

    text-align:left; /* right-align text in IE */    
    margin: 0px auto 0px auto;
}

**audiomad** · 03-01-2008, 02:10 PM

This is in the wrong section but where is your container?

**Jiggy1965** · 02:21 PM

O, right, sorry. I thought it had more to do with html then css cause as far as I know
margin 0 auto 0 auto is used to have it centered especially for firefox.

What do you mean, where is my container?

I've noticed also that when I turn:
<div id="mkwrapper" style="width: 950px;">
into:
<div id="mkwrapper" style="width: 50px;">
making the main container much smaller, the container is aligned to the right completely in Firefox? And still 100% of the browser window in IE?

Why??
Why is the 50px container centered in both??

**audiomad** · 03-01-2008, 03:14 PM

When I center my sites I use

#container {
margin:0 auto;
width:860px;
bottom:0;
}

It seems to work well with both FireFox and IE

**LadynRed** · 03-01-2008, 06:36 PM

Read the stickies !
http://www.webmaster-talk.com/css-fo...r-website.html

If you want a standards-compliant browser to center a div, you MUST give that div a DEFINIED WIDTH ! You have no width defined.

**Gilligan** · 03-01-2008, 06:46 PM

it shifts to the right in firefox whereas it centers in firefox

**Jiggy1965** · 03-02-2008, 05:17 AM

Quote:

it shifts to the right in firefox whereas it centers in firefox

You're right, I meant it shifts to the right in firefox whereas it centers in internet explorer

Quote:

You have no width defined.

I did??

Code:

 <div id="mkwrapper" style="width: 950px;">

**audiomad** · 03-02-2008, 05:28 AM

are you floating your divs left and right?

**LadynRed** · 03-02-2008, 10:02 AM

Get rid of the inline styles.
Get rid of the tables for layout.

In my Firefox, your site IS centered, so what FF or OS are you seeing the problem ?

**Jiggy1965** · 03-02-2008, 11:26 AM

FF 2.0.0.12 on windows xp with 1024x768. I guess it would show centered on monitors with a higher resolution (what's yours)?

**LadynRed** · 03-02-2008, 11:37 AM

On my laptop, 1280x800, on my desktop 1280x1024

**Jiggy1965** · 03-02-2008, 12:04 PM

So basically it is centering like it should with using 'margin 0 auto 0 auto' and a fixed width div.

But on 1024x768 it seems to have problems centering, so it seems. As if it finds the layout too wide. Even with the vertical scroller and a left/right border graphic of 25 px. Tried removing the flash header, and lowering the div width of 950 (because left and right there is a 25px wide grey image used as a border of the div). But that didn't work either. It somehow scales everything to wider then the 1024 browser window.

What could do that?

**olliebollie** · 03-02-2008, 02:36 PM

Quote:

Originally Posted by Jiggy1965

I've noticed on www.meteo-in.nl that the site shifts to the right in Firefox, whereas it centers (like it should) in Firefox. Can anyone figure out why this happens?

Hello Jiggy, I checked your site and see the problem. Your center td should have a width of 980px - 25px - 25px = 930px, but it has 990px - but why? If you crawl through your code you will find an embed:

Code:

<embed src="../../../weer.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="990" height="189"></embed>

And here it is, this embed pushes your table to have 25px + 990px + 25px = 1040px (which it really has right now).

Another thing is, your

Code:

<div style="width: 980px;" id="mkwrapper">

maintains its width of 980px while the table overflows to the right, that's why it looks like it isn't centered - but it is, it's just the table that leaks out. If you change the embed width to 930 it will fix your problem, I checked it in Firebug.

**Jiggy1965** · 03:10 PM

I've already lowered the header width to something small like 100 and even removed it completely. Didn't matter.

Also lowered the width of the main div
<div style="width: 980px;" id="mkwrapper">
But noticed that the more I lower it e.g.
<div style="width: 80px;" id="mkwrapper">
it just adds more left margin and the table is completely stuck to the right in Firefox? In Internet Explorer it centers.

**olliebollie** · 03-02-2008, 03:31 PM

Quote:

Originally Posted by Jiggy1965

I've already lowered the header width to something small like 100 and even removed it completely. Didn't matter.

Also lowered the width of the main div
<div style="width: 980px;" id="mkwrapper">
But noticed that the more I lower it e.g.
<div style="width: 80px;" id="mkwrapper">
it just adds more left margin and the table is completely stuck to the right in Firefox? In Internet Explorer it centers.

1) Lowering the width of <div id="mkwrapper"> won't solve anything, it would work if you increased it on 1040px because your table has width of 1040px. Trust me, if you change this

Code:

<embed src="../../../weer.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="990" height="189"></embed>

to this:

Code:

<embed src="../../../weer.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="930" height="189"></embed>

it will work.

2) Why does it work in IE6? Because if you have a <div id="wrapper" style="width: 500px; margin: 0 auto;"> and inside a <div id="header" style="width: 1000px;">, IE6 will widen div#wrapper until div#header fits in - that's when div#wrapper has width of 1000px. Firefox will maintain the width of div#wrapper on 500px, centered by "margin: 0 auto;", but the inside div#header will overflow to the right making it seem like it isn't centered - but it isn't because we defined "margin: 0 auto;" on div#wrapper, not div#header.

**Jiggy1965** · 03-02-2008, 03:40 PM

I've now completely removed the header.
And decreased the main wrapper:
<div style="width: 80px;" id="mkwrapper">

In FF it now centeres that 80px and pushing everything else to the right. Like banners etc. So why does everything bigger dan 80px pushes itself to the right in FF and how can I make it in FF that it pushes the 80px div in both directions?

**olliebollie** · 03-02-2008, 03:47 PM

Quote:

Originally Posted by Jiggy1965

I've now completely removed the header.
And decreased the main wrapper:
<div style="width: 80px;" id="mkwrapper">

In FF it now centeres that 80px and pushing everything else to the right. Like banners etc. So why does everything bigger dan 80px pushes itself to the right in FF and how can I make it in FF that it pushes the 80px div in both directions?

Why? Because all modern browsers support correct overflowing behavior, IE6 behaves wrong though it may seem it behaves correct.