tags:

views:

191

answers:

4

hello members, I am having a problem in placing a div inside a div as required. Please look at the code below.

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    </head>
<body>
<div style="min-width:100%; min-height:90%; background-color:Red; text-align:center;">
<div style="min-height:100%; background-color:Green; width:90%; height:100%;
color:White;">testing 100% height and 90% width in red container</div>
</div>
<div style="min-height:10%; background-color:Yellow; width:100%;"></div>
</body>
</html>

Now I want to place the green div, inside red div, by utilizing all of the height of red div. Thus green div should have height equivalent to red div and width as 90% of the width of red div. I think i have done the same, but its not working, in any browser.

To see the problem, copy the code i provided and save it as a HTML file. Then look it in IE.

Please help me.

+1  A: 

Remember to put a DOCTYPE at the beginning or the page will render in quirks mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
gcores
+3  A: 
  1. You have no Doctype, so browsers will enter Quirks mode and get lots of things wrong (IE more than others)
  2. Percentage heights applied to elements which are children of elements with a height of "auto" are treated as having a height of "auto". Since you haven't specified a height for the body element, it has its default value of "auto".
David Dorward
To be more specific: In addition to a DocType, you need to add height: 100%; to the body element (and possibly the html element).
AaronSieb
DOCTYPE included. not enough space.<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%; width:100%;"><head> <title></title> </head><body style="height:100%; width:100%; top:0px; left:0px;margin: 0px;"><div style="width:100%; height:90%; background-color:Red;"><center style="height:100%; width:100%;"><div style="background-color:Green; width:90%; min-height:100%; color:White; text-align:left; padding-left:20px;">testing 100% height and 90% width in red container</div></center></div><div style="min-height:10%; background-color:Yellow; width:100%;"></div></body></html>
Mohit
A: 

Your red div has to have a height specified, min-height doesn't work in IE.

kaba
A: 

WORKING NOW.................

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

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%; width:100%;">
<head>
    <title></title>
    </head>
<body style="height:100%; width:100%; top:0px; left:0px;margin: 0px;">
<div style="width:100%; height:90%; background-color:Red;"><center style="height:100%; width:100%;">
<div style="background-color:Green; width:90%; min-height:100%; color:White; text-align:left; padding-left:20px;">testing 100% height and 90% width in red container</div></center>
</div>
<div style="min-height:10%; background-color:Yellow; width:100%;"></div>
</body>
</html>
Mohit