Sidebars out of whack in Mozilla Firfox

For some unkown reason, my sidebars are being shifted over by a few pixels in Firefox. I can't for the life of me, figure out what the hell I am doing wrong. It shows absolutely perfectly in IE6 but not firfox.
Can some CSS genius take a look at this site http://www.autodreamz.net in both Firefox and IE6 and give me some idea on how to fix this.

This is the CSS layout I am using to display the sidebars.

 

Not tested in IE.

#sidebar2 {
position:relative;
float:right;
width:165px;
margin-left: 10px;
}

Code (markup):

By making the outer wrap absolute position, you cause an unscrollable loss of content should the visitor prefer a smaller window.

cheers,

gary

 

You totally lost me there with that one. Sorry, but can you re-explain, but instead, use context similar to those use to teach ten year olds.

 

The first part was the direct answer to your query. Add a left margin to #sideBar2. This keeps the next floated column pushed away by that amount.

The second comment referred to method used to center the page as a whole. You used {position: absolute;} for the outer wrapper. That means the centering method (arbitrary values used here)

#outerwrapper {
    width: 1000px;
    position: absolute;
    left: 50%;
    margin-left: -500px;
    }

Code (markup):

will have problems should the user's viewport (the actual viewing area of the browser) be less than 1000px wide. For example, assume a viewport 800px wide (more likely 780px, but I'll keep it simple). The left offset is 50%, or 400px. Now, the left margin pulls the page 500px back to the left, 100px going off screen, never to be seen again.

A safer, less brittle method is to use margins to center the container.

#outerwrapper {
    position: relative;  /*to set a positioned reference, a technical thing 
                           you'll just have to learn about—ten year old 
                           or not :)*/
    width: 1000px;
    margin: 0 auto;  /*this does require IE be in standards mode*/
    }

Code (markup):

cheers,

gary

 

Thanks Gary. The change you refer to here:

Worked like a charm. By the way I had to remove this:

from here:

After doing that it now works in both browsers. As for the other issue you mentioned regarding this:

which is actually this in my CSS:

Changing it to this:

Broke apart my template. So I left it how it is for now.

Thanks anyways for your help.