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;"><!--Main div//-->
<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?
ThanksIf I understand the question right, this could be accomplished by making your positioning relative using
position: relative;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.
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;"><!--Main div//-->
<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?
ThanksIf I understand the question right, this could be accomplished by making your positioning relative using
position: relative;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.