Page Layout Strange in Firefox

Question

Here's an example of the problem:
http://www.brucetholmes.com/Music/Music.html
In Safari it displays just fine. But in Firefox the main container is way off to the right. I've studied the code till I'm blue in the face trying to figure out what's wrong. I've got many other pages with the identical structure where everything works fine. I've compared the pages that work with the ones that don't and everything seems the same. The divs all seem accounted for and handled properly. But all the pages derived from the "music" template have this identical problem. I've spent days staring at the code and I'm slowly going blind. Save my eyesight! Help, please.
Bruce

Answer 1

BruceTHolmes wrote:
Dear Osgood_,
This seemed like it was going to work. But it has an unfortunate side
effect. The Spry menu bar at the bottom of the header no longer drops down
with the submenus when this is in place. So as much as I appreciate your
time and effort, it isn't the solution.
Bruce
We don't give up that easily.
See what the outcome is if you insert <br style="clear: both;" /> (see below) directly into the code before the closing </div> of the 'header' <div>
<!-- end #header -->    <br style="clear: both;" />     </div>
  <div class="twoColFixLtHdr" id="sidebar1">
The reason why the overflow: hidden; didn't work on this ocassion is because it hides any overflow code and the spry drop-downs are overflow.
OR if the above does not work add float: left; to the css selector below (as shown) AND IMPORTANTLY comment out (/* */) margin-left: 225px; (as shown)
.twoColFixLtHdr #mainContent {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    float: left;
    /* margin-left: 225px; */
    padding-top: 0;
    padding-right: 15px;
    padding-bottom: 0;
    padding-left: 15px;