I'm trying to follow a skin tutorial and have run into a bit of a stumbling block that I can't seem to resolve.  I can't get my right pane to align with the right margin of my content container and think I've tried everything to get it right.  I'm hoping a fresh pair of eyes (and those with better skinning skills can help me out.    Here's the piece of my skin.css that I'm struggling with:

#content
{
padding: 0em;
width: 1064px;
}  
#menucontainer
{
    height: 600px;
    width: 225px;
    background-color: #231f20;
    font-size: 15px;
    font-family: Garamond;
    text-align: center;
    font-weight: bold;
    float: left;
    padding: 0;
    margin: 0;
}  
#primarycontainer
{
margin-left: 18.0em;
width:614px;
}
#secondarycontainer
{
   width:225px;
    background-color: #d6b956;
    height: 600px;
    float: right;
    margin: 0; 
}

And the code in my index.ascx file:

<div id="content">
<div id="menucontainer">
    <div id="LeftPane" runat="server" visible="false"></div>
</div>
<div id="primarycontainer">
                <div id="ContentPane" runat="server" visible="false"></div>
               
</div>
<div id="secondarycontainer">
            <div id="RightPane" runat="server" visible="false"></div>
</div>

In IE, the secondarycontainer aligns on the right margin of the container, but doesn't sit at the top.  In Firefox, it sits at the top but is about 20px off the right margin. 

As you have noticed IE and Firefox don't behave the same when it comes to margins/padding and widths.

The are a number important things to note here;

Firstly, Use a doctype declaration for your skin... this is critical. Without it the browser will adopt 'quirks mode' for default css settings for tags making for all sorts of apparently random behaviour between browsers.

Secondly, when you are using floated columns avoid using pixel measurements if you want consistant behaviour between browsers.
Most importantly (and often forgotten) include the left and right margin and padding settings in your calculations of column widths so it totals 100%. This does work, in practice for completely consistant output in all browsers.

Thirdly, use the clear directive after floating columns.... 

Tip;
.clearboth {
clear:both;
}

like this;
<div class="col1" >bla bla</div>
<div class="col2">bla bla</div> 
<br class="clearboth" />
<div class="col1" >bla bla</div>
<div class="col2">bla bla</div> 
<div class="col3">bla bla</div> 
<br class="clearboth" />

the use of <br/> is not absolutely essential but improves compatability in older browsers.

Fourthly, watch out for the dreaded IE overflow bug.... this has a nasty habit of breaking columns when content wants to grow beyond the size of the column... set overflow:hidden; to stop this for IE.