CSS does not allow me to set div height just as tables would [Archive]

Click to See Complete Forum and Search --> : CSS does not allow me to set div height just as tables would

amdRocks

10-25-2003, 06:31 PM

Hi All,
I hope my question makes sense for you as well...
Please take a look at the code below

<div style="display:table; width:100%; height:100%; border:1px dotted green;">
<h4 class="page_heading" style="text-align:center;">Test Page</h4>
<div style="display:table-row;">
<div style="display:table-cell;width:100%;height:95%;border:1px solid red;">
Top Cell
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;width:100%;height:5%;border:1px solid blue;">
Bottom Cell
</div>
</div>
</div>

I am trying to set it so that I can set the height of the top div 95% and height of the bottom div to be 5%

I am using XHTML strict DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Now can some one among you point out that how come its so darn horrible for a joe like me to figure it out to set heights..just as I used to do in tables?

Thanks

keichan

10-25-2003, 09:40 PM

If I understand the question right, this could be accomplished by making your positioning relative using

position: relative;

Khalid Ali

10-25-2003, 11:19 PM

Originally posted by keichan
If....accomplished by making your positioning relative using

position: relative;

Not quite....

What happens is that div's height is set with reference to the parent container, since he is not setting the external most containers height therefore his problem.

What is required in this situation is that set the body elements height:100% and then rest should fall in place.