HTML5: Firefox vs Safari... need help with some CSS

Question

This is my first HTML5 site and I never expected for Firefox and Safari to be fighting! It's usually IE that I'm mad at. The header and footer both seem to be working just fine in both browsers. But the content area is shifted all the way to the right in Safari.

If I add webkit css (first time having to use that as well), then Safari works fine, but then Firefox is messed up. My understanding of HTML5 was that it was going to make things more streamlined. I'm almost ready to go back to HTML4 if I can't get this figured out by tomorrow morning. Any thoughts??

Here's my CSS:

#content {
    display: table;
}

#mainContentInt {
    display: table-cell;
    width: 331px;
    padding-right: 10px;
    vertical-align:top;
}

asideInt {
    display: table-cell;
    width: 550px;
    margin-left:323px;
    padding-top:60px;
    margin-top:-200px;      
}

Here's my HTML:

<div id="content">

    <div id="mainContentInt">

        <section>
            <p>test leftCol</p>
        </section>

    </div><!-- end mainContentInt-->

    <asideInt>
        <p>test rightCol1</p>

        <p>test rightCol2</p>

    </asideInt>

</div><!-- end content-->

Answer 1

I don’t think <asideInt> is an element in HTML5. Do you mean <aside>?