<h2> extending too far

[shadowayex]

This worked perfectly fine until I upgraded Firefox to 3.0.1. If you have that version of Firefox, take a look.Here's the code I'm working with:CSS:

div.club   {border: 2px solid #000000;            float: left;            height: 300px;            margin-right: 10px;            overflow: auto;            padding: 10px;            text-align: left;            width: 330px;}div.site   {border: 2px solid #000000;            height: 300px;            margin-left: 0px;            overflow: auto;            padding: 10px;            text-align: left;            width: 330px;}

HTML:

    <div style="text-align: center;">        <div id="club" style="float: left;">            <h2>Latest Club Update/News</h2>            <a href="java script: void(0)" onclick="expandClub()">Expand</a> <a href="java script: void(0)" onclick="backToNormal()">Back To Normal</a>            <div class="club" id="club2">                {$clubupdate}            </div>        </div>        <div id="site">            <h2>Latest Site Update/News</h2>            <a href="java script: void(0)" onclick="expandSite()">Expand</a> <a href="java script: void(0)" onclick="backToNormal()">Back To Normal</a>            <div class="site" id="site2">                {$siteupdate}            </div>        </div>    </div>

Of course there's more code to the page, but that's all that is concerned with this problem. Like I said, this just recently happened. It looks fine in IE7, and looked fine in the old Firefox.

[Guest FirefoxRocks]

For some reason, the $siteupdate block doesn't have enough room on the right, therefore it is pushed below the $clubupdate box causing the entire right panel (latest site updates) to have a small width hence the left panel taking up the extra space.It also looks like this in Opera 9.51. In Konqueror it looks fine with a balance between both left and right sides.I don't have IE accessible right now (on Linux) but I'm not sure how to solve this problem other than try reducing the widths.

[shadowayex]

I've reduced widths as low as 200 px and it still remains like that. I'm not sure it's actually a width problem.

[shadowayex]

I fixed it... ish. It's kind of a jimmied up way of fixing it, but it looks like it should now. I don't know what the problem was but I had to change the width on an outside div that is invisible (used for formatting purposes) to 364, because the other column wasn't following my margin CSS things. Once again, I don't know why, but I just added what I put for margin, plus 4 so it would take the borders into consideration, and added that to the original 330px and it works now.