By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,028 Members | 1,010 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,028 IT Pros & Developers. It's quick & easy.

div inside <td> (again)

P: n/a
Hi everyone,

I know that there's been a bit of discussion involving placing <div>s
inside table cells, but I've read all of the posts and couldn't find
anything that solved my problem.

I've written some test code which can be found at

1) The first example places an absolute positioned div inside a
relatively positioned table. I remember reading somewhere that
specifying position: relative essentially establishes a new co-ordinate
system for any children, so the div's co-ordinate system should be in
terms of the table's. You can see this is occurring, the table has
moved down the page a bit, and so has the div. The table cell doesn't
have any contents because I remember reading somewhere that absolute
positioned elements get removed from the flow layout of the page. I
think I remember reading somewhere that if you don't specify any
co-ordinates for the absolute element, it will be placed where it would
have normally gone had it been layed out according to the normal flow
of the page (thus the reason why its positioned where it is, in between
the words 'some' and 'more'). Changing the display to block (the
default for a div) will place it underneath the word 'some' because
this is where a block element would normally be placed, on the next
line after the word 'some'. What I DON'T UNDERSTAND is why the height
and the width seemed to have been inherited from the viewport, rather
than the table cell (which is the containing block)

%: "Defines the height in % of the containing block"

2) In the second example I can't understand why the border of the div
seems to overflow the table cell by a bit, is this normal?

3) This was experimenting with a suggestion to put a relatively
positioned div inside the table cell and put an absolutely positioned
div inside the relatively positioned div, although I don't understand
why you wouldn't just make the table cell be relatively positioned,
which would establish the exact same co-ordinate position but have one
less div. I'm guessing the inner div has zero height because it
inerhited the height from the outer div, which itself is empty and thus
has zero height (empty because the contents have been taken out of the
normal flow layout of the page). Here you don't see the problem with
example 1, which seems to inherit the height and width from the
viewport. I tried making the table cell relatively positioned in
example 6, but everything seemed to go crazy (inherited width & height
from the viewport instead of the table cell)

5) The fifth example illustrates my original problem (and the original
application). I want to give the contained div some padding so that the
contents don't sit against the edge of the tables. I've tried this and
it seems to work - the contents aren't up against the edge of the
table, but the dimensions of the div seem to have spilled outside of
the containing block (the table cell) as a result. Increasing the
padding increases the amount the div spills outside of the table
cell... why??

6) Again the div seems to be inheriting from the viewport rather than
the cell...??

Thanks for any help


Jul 3 '06 #1
Share this Question
Share on Google+
2 Replies

P: n/a
hello taras,

checked out your test page with my browsers:

firefox 1.0 circa 2004 (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107


IE 6.0.2900 copyrighted 2004

so both are a little old (but many people do not keep up with the latest browsers)

IE is the best with 2,4 & 5 displayed correctly. 3 & 6 have the feint outside border with no content
height, 1 has the two borders displaced on the screen from each other by 1 cm (feint outside boarder
slightly too small as well).

FF gets all of them wrong. 2 & 4 have slight miss-sizing of the boarders but would only be a slight
irritation to the viewer. The others are horrid, 1 & 6 producing black (inner) boarders almost the
size of the screen.

hope this feedback helps,

best wishes,

Jul 3 '06 #2

P: n/a
FF gets all of them wrong. 2 & 4 have slight miss-sizing of the boarders but would only be a slight
irritation to the viewer. The others are horrid, 1 & 6 producing black (inner) boarders almost the
size of the screen.
Hmm, I would trust FF's implementation of the CSS standard more than
IE, which leads me to believe I'm not interpreting the CSS standards

Jul 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.