Simple Nested DIV question

Forum Moderators: not2easy

Message Too Old, No Replies

Simple Nested DIV question

DIV height 100%

mirali00

6:38 pm on Oct 16, 2011 (gmt 0)

I have a very simple question, but can't seem to get it to work properly. Below is what I have

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 99%;
}
#container {
min-height: 100%;
width: 98%;
margin: 0 auto;
border:5px;
}
* html #container {
height:100%;
width:98%;
}
</style>
</head>
<body>
<div id="container" style="border: medium double #FF0000">
<div id="containertop" style="border: medium groove #00FF00; height: 90%;">
<br />
</div>
</div>
</body>
</html>

I am trying to get the inner DIV to be 90% of the height of the outer DIV. The outer DIV height works, but the inner DIV height does not.

What am I missing? I've spent 3 days on this and getting nowhere...any help would be REALLY appreciated!

Thanks!

Paul_o_b

8:04 pm on Oct 16, 2011 (gmt 0)

Hi,

Actually it's not a simple question it's a very complicated question with a lot of reasons why you are having problems :)

You can't base an element's height on a parent that has no height defined. If the parent is controlled by min-height or is controlled by its content only then its height is effectively auto and the child cannot base its height on that parent.

The parent would need to be height:100% (or similar) and then you could give the child height:90% and it would work.

However that would mean that your layout could never grow and any content that extends below the viewport will just spill out of the container.

Suffice to say what you are trying to so in that manner is impossible. The only element that can cover a 100% distance is the first container on the page which must use min-height:100% to achieve this. All inner elements collapse to auto height unless specific pixel height is applied.

If you are looking for IE8+ and other modern browsers support then you can use the display:table properties and mimic table behaviour where height is treated as a minimum and the content will still expand it. You will still run into problems with the 100% settings and the borders you are setting as that immediately makes it too big.

If you need to support IE7 and under then you could use a faux column approach (i.e. us background images on the main parent to create extra columns - but that would prove difficult for a fluid layout and is probably not feasible in this instance).

However here is a better method that will work in IE7+ and creates the borders using absolute overlays. Don't worry that they are absolute elements because they hold no content. All they do is provide full length borders.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transparent shadow border on 100% high layout</title>
<style type="text/css">
/*Old Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {/* instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
margin:0;
padding:0;
height:100%;
}
h1, p {
margin:0 0 .5em;
padding:5px 10px 0;
}
body { background:#fff; }
#outer {
min-height:100%;
position:relative;
z-index:1;
clear:both;
}
* html #outer { height:100%; }
#inner{/* holds all content*/
padding:1px 0;
position:relative;
z-index:2;
zoom:1.0;
}
.border1, .border1 span {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border: 5px double #FF0000;
z-index:0;
}
.border1 span {
border:4px groove #00FF00;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<p>testing</p>
<p>testing</p>
<p><a href="#">testing</a></p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
<div class="border1"><span></span></div>
</div>
</body>
</html>

The above could be made to work in IE6 with a few hacks but I left it as simple as possible.

mirali00

8:31 pm on Oct 16, 2011 (gmt 0)

oh, wow! I didn't it was this complicated! Thanks so much!

Maybe I'm going about it all wrong. All I am trying to do is split the screen into 4 areas or rows. Row 1, 2 and 4 have to be fixed, but row 3 should expand or collapse based on browser window size. I tried doing this with tables but between IE and Chrome, the rows 1, 2 and 3 don't stay fixed height.

Any suggestions? Could you point me the right direction?

Thanks!

mirali00

8:55 pm on Oct 16, 2011 (gmt 0)

Duh! I got it!

body - 100% height
div - 100% height
table - 100% height
table row1=30px
table row2=30px
table row4=30px.

That did it! Looks ok in IE, Chrome and Firefox.

Thanks so much! Your code gave me the base line I needed.

Paul_o_b

9:01 pm on Oct 16, 2011 (gmt 0)

If you mean a fixed height for row 1,2, and 4 then you can use the method above with a bit of tweaking.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transparent shadow border on 100% high layout</title>
<style type="text/css">
/*Old Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {/* instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
margin:0;
padding:0;
height:100%;
}
h1,h2{margin:0}
p {
margin:0 0 .5em;
padding:5px 10px 0;
}
body { background:#fff; }
#outer {
min-height:100%;
position:relative;
z-index:1;
clear:both;
}
* html #outer { height:100%; }
#inner {/* holds all content*/
padding:1px 0 70px;/* preserve footer space*/
position:relative;
top:9px;
z-index:2;
zoom:1.0;
margin:0 9px 0;
}
.border1, .border1 span,.border1 b {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border: 5px double #FF0000;
z-index:0;
}
.border1 span { border:4px groove #00FF00; }
.border1 b{top:104px;bottom:53px;border:3px solid #000;}
#row1, #row2, #footer {
background:red;
height:50px;
color:#fff;
text-align:center;
}
#row2{background:yellow;color:#000}
#footer {
margin:-60px 9px;
position:relative;
z-index:3;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="row1">
<h1>Fixed height element</h1>
</div>
<div id="row2">
<h2>Fixed height element</h2>
</div>
<p>testing</p>
<p>testing</p>
<p><a href="#">testing</a></p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
<div class="border1"><span><b></b></span></div>
</div>
<div id="footer">Fixed height footer</div>
</body>
</html>

There are a lot of concepts to take into account in the above code and it may be difficult for you to alter until you work out how it works.

If you meant fixed positioned elements then that's a whole different kettle of fish :)