Bottom right corner class doesn't work in firefox why?

Question

I have been trying to tweak this for two days now but could not fix it. Please help me out. I have this css. It works correctly in Chrome, IE and Opera but not firefox. Here is the link: http://jsfiddle.net/6p5vp/6/

Here is the class I used which works correctly in other browsers except firefox:

.main1 .row td
 {
    border-bottom: 1px dotted silver;
    vertical-align:top;
    padding:10px;
    margin-bottom:20px;
    margin-top:20px;
   position:relative;

 }

 .main1 .row td .tick
 {
    bottom:0;
    right:0;
   text-align:right;
   position:absolute;
 }​

Here is the markup:

<table class="main1">
<tr class="row">
<td>
  <div>     
  <div>
    All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
       All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
       All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
  </div>
</div>
</td>
<td>
<div>
  <div>
    All the text comes here  All the text comes here  All the text comes here  All the text comes here 

  </div>
  <div class="tick">
      <input type="checkbox"/>
  </div>
</div>
</td>
</tr>
</table>​

What I want is to have a checkbox appear at the bottom right corner of the second column based on the height of the first column. Something like:

textincolumn1 textincolumn2

textincolumn1

textincolumn1
textincolumn1
textincolumn1 checkbox here

Please help me correct it. Thank you very much.

Answer 1

Why not use a tableless approach?

Maybe something like this: http://jsfiddle.net/6E7vS/

HTML:

<div class="main">

    <div class="right">
        Lorem ipsum ...
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
    </div>

    <div class="checkbox">
        <input type="checkbox">
    </div>

</div>​

CSS:

.main{
    position:relative;
    width: 550px;
    border: 1px solid magenta;
}

.left{
    width: 300px;
}

.right{
    float: right;
    width: 200px;
}

.checkbox{
    width: 20px;
    height: 20px;
    padding: 20px;
    background: #eee;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 2

Here is the modified version of your jfiddle bearing in mind that it expect the first column to be taller than the second. If you can't guarrentee that, then remove the margin-top:-16px from the css and you should be fine.

HTML:

<div>
    <div class='column1'>
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here 
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here
    </div>
    <div class='column2'>
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here 
    </div>
</div>
<div class="tick">
   this is where the check box goes <input type="checkbox"/>
</div>
<br style='clear:both'/><br/>
<p>Continue with content....</p>​

CSS:

.column1 {
    width : 50%;
    float : left;
    margin-right : 10px;    
}

.column2 {
    overflow : none;
}

.tick {
    clear : both;
    float : right;
    margin-top:-16px;
}​

Answer 3

Based on the suggestion made by John. I was able to come up with this which seems to work finally. Here is the css:

.container

{
    position:relative;
    padding-left:10px;
    margin-bottom:10px;
    margin-top:10px;
 }
.column1
{
    width : 70%;
    float : left;
    margin-right:10px; 
}

.tick {
    clear : both;
    float : right;
    margin-top:-16px;
}

And in the table, here is markup:

<table style="width:100%">
<tr>
 <td>
  <div class="container">
   <div class="column1">
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1   
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1 
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1 
   </div>
  <div>
     <div>
      text in column 2 text in column 2 text in column 2 text in column 2 text in column     
       2 text in column 2 
     </div>
     <div class="tick">
      <input type="checkbox">
     </div>
  </div>

  </div>
  </td>
 <tr>
<table>

Hopefully, I don't miss anything else. Thanks for all the replies.