100% div in table cell

dlipski

11-20-2008, 03:30 PM

Hi,

I know that there is a lot of similar threads in many forums but none of them helps me with my problem.
I have page as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
overflow: auto;
margin: 0px;
}
</style>
</head>

<body>
<div style="width: 30%; height: auto; border: 1px dotted red">
<div id="div1" style="background-color: blue;">
<table style="width: 100%; height: 100%;">
<tr style="width: 100%; height: 100%">
<td style="height: 100%; width: 50%; border: 1px dotted black;">
1<br> 2
<br>
</td>
<td style="height: 100%; border: 1px dotted black;">
<div id="div2" style="height: 100%; background-color: red;">.</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

What I would like to achiive is to stretch(vertically) div with id=div2 to entire table cell (what exactly heppens in Firefox) in IE.

I spend few hours trying to do this but I dont have any other idea.
What is important:
the most outer div must have height set to auto (or something that allows to autoresize to its content), and page have to be run in standard mode.

Regards
Daniel

dlipski

11-20-2008, 07:46 PM

I dont want to reply to my own posts but i found another (simplier I think) example of the same problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body style="width 100%; height 100%;">
<table style="width: 30%; height: 0%;">
<tr>
<td style="border: 1px dashed black;">
<div style="height: 40px;">.</div>
</td>
<td style="border: 1px dashed black; height: 100%">
<div id="choosenOne" style="height: 100%; background-color: red;">.</div>
</td>
</tr>
</table>
</body>
</html>

How to force div(id="choosenOne") to fill all avalibale cell height (like in Firefox) in IE ?

Doctor_Varney

11-21-2008, 07:43 AM

Can I just ask... For what reason are you trying to place a div inside a table cell?

Divs are page divisions for layout and table cells are containers for tabular data. So, what are you planning to actually place inside this div?

dlipski

11-21-2008, 08:56 AM

abduraooft

11-21-2008, 09:03 AM

dlipski, do you know why tables for layout is stupid (http://www.hotdesign.com/seybold/) ?

Doctor_Varney

11-21-2008, 09:28 AM

Hi,

Im doing so because I would like to poistion elements inside cell relative to cell itself. Setting position:relative to TD i undefined (not works in Firefox) so I want to add div (with position relative) to this cell and position elements inside div relative to this div.

Hmm... This is an over-complicated solution to your design's requirements.

Try losing the table altogether. Use divs for what they are meant. You can stack them, you can size them and you can position them, without any need for a table. I'd say your table is completely and utterly redundant and making what should be an easy job more complicated than it needs to be. I can see why you've come to the conclusion you need divs, to control content inside cells, but you're underestimating the potential of the div, to help control your layout.

So, whatever it is you're trying place in a table cell, you can place inside a div. Style up the div and style up the elements inside it and hey presto!

Hope this helps. If you get stuck, just ask. I'll try to help if I can, but there are always people here, who will be willing to help you use the elements at your disposal sensibly.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

dlipski

11-21-2008, 10:10 AM

Hi

I've read a lot of articles about why to use div to layout pages instead to using tables.
Im in situation when I have to use table (dynamic cell size adjustment).
The problem I have is to position elements inside cell relative to this cell. Could you help me with this ?

And one more:
Im not working on web site, Im working on web application so many of arguments from "use div instead of tables" has na value.

Regards
Daniel

Doctor_Varney

11-21-2008, 07:13 PM

Fair enough, although it might have been more helpful to mention this beforehand. You should state what your project entails, in future, so as not to waste people's time.

Moving on...

Style the table. Remove the superflous divs and apply padding to the data cells. Cells will auto stretch with the content.

At this point, I can't offer any more than this because you are not being clear about your purpose. But if your intention is to have the whole of the cell red, regardless of size, then you can style it up to be so, using td background.