Every now and then I seem to struggle getting something to work properly in Firefox, I suppose it does make a nice change from IE.

Im trying to make a template for a forum that I will be making soon. It started off relatively straightforward but even the simplest of things seem to be messing up.

All I wanted to use was a few div's in order to layout each persons message. But the one I was planning on using at the bottom [to hold the quote and reply buttons etc...] just seems to be floating in 'mid air'.

It stressed me out so I thought I'd just use a table to contain the message for now, but the problem is still there!

This screenshot should help to show what i mean. IE is on the right [how it should look]

http://inspindesign.clawz.com/stuff/FFprob.jpg

HTML

<table class="msg">
        <tr>
          <th scope="col">14.07.07</th>
        </tr>
        <tr class="alt2">
          <td><div class="avatar">
            <p class="hl">Username</p>
            <p class="hl"><img src="../Images/bk_royale.gif" width="140" height="161" class="thumb" /></p>
            <p class="hl">000 Posts </p>
          </div>
          <div class="hundredi">Content for  class "hundredi&quot; Goedredi&quot; Goedredi&quot; Goe
          dredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goe
          dredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goe
          dredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goe
          dredi&quot; Goedredi&quot; Goedredi&quot; Goedredi&quot; Goes Here</div></td>
        </tr>
        <tr class="alt3">
          <td><div class="ftab">asdfasdf asdf asd fasf asdf asdf asdf as fas  for  class "ftab" Goes Here</div></td>
        </tr>
      </table>

CSS:

table.msg {float:none;width:100%;margin-top:5px;clear:left;}
table.msg tr {vertical-align:top;}
tr.alt {background-image:url(../Images/bg_line2.gif);}
tr.alt2 {background-image:url(../Images/bg_line.gif);}
tr.alt3 {background-color:#323232;}
div.ftab {width:100px;height:20px;background-color:#171717;}

Can anyone think whats wrong with my code??

CLEAR your floats and the problem should go away.
http://css-discuss.incutio.com/?page=ClearingSpace

Hmmm I've tried adding 'clear:left' to 'div.ftab', but the problem is still there. Is that what you meant for me to try?

From the looks of the overflow BELOW the text, you need a clear:both, but NOT on the div itself, either add it to the div that follows it or add a clearing element, like a <br> styled to clear - like in the examples I gave you the link to.