-1

I have a div that has a table in it.the table has a row and tow columns.I want a div inside the second column and I want it to be positioned absolute from the table column(not the start of the page).so here is what I did:

this is the html file:

<body>
    <div id="one">
        <table id="table">
            <tr id="two">
                <td id="three"></td>
                <td id="three">
                    <div id="four"></div>
                </td>
            </tr>
        </table>
    </div>
</body>

and this is the CSS:

#one {
width: 100%;
height: 100px;
background-color: #f00;
}

#three {
width: 100px;
height: 80px;
background-color: #b6ff00;
/*margin-left: 100px;*/
/*float: left;*/
position: relative;
}

#four {
width: 50px;
height: 40px;
background-color: #0ff;
position: absolute;
left: 20px;
top: 20px;
}

this code works nicely on Chrome and IE.But it doesn't work on Firefox.In Firefox,the <div id=four> 's position,starts from the top left corner of the page rather than the <div id=three>.What can I do about it?(And I should mention that I should use a table for my design.I can't use anything else here)

roostaamir
  • 1,928
  • 5
  • 24
  • 51
  • Set the attribute `position:relative` to the parent, and set the attribute `position:absolute` to the child. – frogatto Jun 28 '13 at 05:38
  • As you can see,I already did this.#three has the position relative.#four(its child),has the position absolute – roostaamir Jun 28 '13 at 05:39
  • It must work!, This is a explicit problem, But maybe some errors in other places. – frogatto Jun 28 '13 at 05:43
  • test the code above!!!when the parent is a table column,it won't work in firefox!and I have no idea why! – roostaamir Jun 28 '13 at 05:46
  • @user2078785 when you don't specify a position, it's actually using `position: static`. http://quirksmode.org/css/css2/position.html So "one" is screwing up the other two – Don Rhummy Jun 28 '13 at 06:00
  • @DonRhummy I changed the position of the `#one` to relative,but still I am not getting anything new!It has the same result! – roostaamir Jun 28 '13 at 06:03

2 Answers2

1

I had this EXACT same problem, found none of the above answers fixed it, and then found a solution in a different thread that fixed it for my project.

Put display: block; on the td that is parent to the div. That's it.

You may be interested to know that I tested this with your example code and got it to work as well, without negative effects in other browsers that I've tested so far. Your mileage may vary depending on needs of the project.

One downside is that it does kill the td identity - for some table layouts you will need additional CSS trickery to reformat, for others this may not be feasible.

Linkage to answer I found: Using Position Relative/Absolute within a TD?

Community
  • 1
  • 1
user2824941
  • 11
  • 2
0

Give the parent position:relative and you are done.

aBhijit
  • 5,261
  • 10
  • 36
  • 56
  • 1
    I AM giving the parent a relative position!but it looks like if the parent is a table column,this method won't work in firefox! – roostaamir Jun 28 '13 at 05:48