CSS absolute div inside relative parent for Firefox

Question

I'm trying to position a div inside a table. The parent has position: relative while my div las position: absolute. I usually develop in chrome and it works just fine there but when I open firefox my absolute div ignores it's parent and occupies the whole page.

Here's an example which works in chrome but not in firefox: http://jsfiddle.net/pdFSh/

Any ideas?

Relevant: http://css-tricks.com/absolutely-position-element-within-a-table-cell/ — xec, Jul 05 '13 at 11:36
`
` inside any table tag will not pass in the W3 Validator, if you care about it. — gustavohenke, Jul 05 '13 at 11:37
http://css-tricks.com/absolute-positioning-inside-relative-positioning/ — Seazoux, Jul 05 '13 at 11:41
@gustavohenke,
is completely valid in in both HTML 4/XHTML 1 and HTML5, the content model of allows any block elements in all these standards. — Ilya Streltsyn, Jul 05 '13 at 11:52

score 11 · Accepted Answer · answered Jul 05 '13 at 11:43

11

You'll need to change the display value of #absolute's parent:

table tr#body td { display: block; }

answered Jul 05 '13 at 11:43

André Dion

21,269
7
56
60

you are answer is fine but how its working can you explain.... – Shailender Arora Jul 05 '13 at 11:56
3

Sure. By default, a table cell's `display` is `table-cell`. Firefox ([wrongly](https://bugzilla.mozilla.org/show_bug.cgi?id=63895)—thanks Ilya Streltsyn) treats table cells differently. Setting `display: block` instructs Firefox to no longer treat the `td` element as a table cell, but instead treats it as a block-level element. `display: inline-block` would work just as well. – André Dion Jul 05 '13 at 12:03
setting parent to `display: block` solved my similar problem. – Andre Elrico Apr 04 '19 at 11:23

Ilya Streltsyn · Answer 2 · 2015-01-29T13:58:30.180

It was the known bug of Firefox (fixed since Firefox 31). Before it was fixed, the common workarounds were nesting the div inside the table cell and setting position: relative to it, or changing the display of the cell itself to display:block (which converts the cell to a div-like block box nested in the anonymous table cell box). The second approach seemed to be applicable in this case because the height of the cell is fixed.

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

I fixed this problem by adding the following to the table tr#body td CSS:

float: left;
width: 100%;

You now will have to watch for margins and padding errors, however these can be avoided by changing the box-sizing on the elements.

A further note, you should get in the habit of always placing a semi-colon, ;, at the end of every line of CSS styling.

Edit: Adding display: block also works as posted by Andre Dion

edited May 23 '17 at 11:46

Community

1
1

answered Jul 05 '13 at 11:42

JosephGarrone

4,081
3
38
61

1

These properties are unnecessary. They work because `float: left` sets `display: block`. Simply setting `display: block` is adequate. – André Dion Jul 05 '13 at 11:45

CSS absolute div inside relative parent for Firefox

3 Answers3