Have Geek Brain

Positioning div to div

I am having a problem placing a div inside a div as required. Take a look at the code below.

<html xmlns="http://www.w3.org/1999/xhtml">
<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 the red div, using the entire height of the red div. So the green div should have a height equivalent to the red div and a width equal to 90% of the red div's width. I think I did the same, but didn't work, in any browser.

To see this issue, copy the provided code and save it as an HTML file. Then look in IE.

Please help me.

0


a source to share


4 answers


  • You don't have Doctype, so browsers will go into Quirks mode and get a lot of errors (IE is more than others)
  • Percentage heights applied to elements that are children of elements with a height of "auto" are considered to have a height of "auto". Since you did not specify a height for the body element, it defaults to "auto".


+3


a source


Do not forget to put DOCTYPE at the beginning or the page will be displayed in quirks mode.



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


a source


Your red div must have the specified height, min-height doesn't work in IE.

0


a source


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

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

<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>
0


a source






More articles:


All Articles