The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

boxs design with nested divs

Im trying to make dynamics divs. I have on container (#container) div thats wraps the whole content. What i would like to do is having 2 divs inside of the main div. One of the inner div should display all info (#content) The last div (#border) should work like an border fading out (using background-image) to the default background. I have mange to get inner div to dynamiclly change the size of the outer div (#content). However the second inner div (#border) dosent get the same height as ther first one. I have also tried to insert i border-div into the content div but not getting the right look because of the title image. I need help with this one...

solved that problem created another one.

I solved that problem by removing the border-div and adding the border as a background-image in the content-div. But now Im having another problem. My div height 100% dosent work in Mozilla FF. Works fine in IE so I supose my syntax is incorrect. If I add html {height: 100%;} the divs will be 100% even if the div conatians no data. But if the there is to much data the inner div wont expand the outer div.

Dose any got a clue? Try it your self, here is the code, just cut n paste to get into the action

If you read the FAQ on 100% height then all your problems will be explained.

You can't inherit 100% into further nestings than the first nesting from the body as mozilla resets then to zero.

Therefore you need to use the main outer container as the basis for the 100% height. I suggest you move the background image into the body and get rid of one nesting altogether leaving the 100% height intact.

The secon problem is that you need to specify min-height for mozilla and height for ie. Read the FAQ for a thorough explanation.

here is your code amended.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Boxes</title>
<style type="text/css">
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
body {
width: 100%;
height:100%;
margin:0;
padding:0;
clear:both;
background:url(bg.jpg) repeat;
}
#content {
width: 650px;
position:relative;
min-height:100%;
background-color:#FFE6F2;
}
* html #content{height:100%}
#menu {
width: 150px;
position: relative;
float: left;
padding-left: 5px;
background-color:#009966;
}
#substance {
width: 490px;
padding-right: 5px;
position:relative;
float: left;
background-color:#006666;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div style="width:650px; height:150px; background-color:#00FF99; float:left; position:relative;">
actually this will be replaced by a picture</div>
<div id="menu">some menu</div>
<div id="substance">
<h2>This is my world</h2>
<p>Welcome! What i would like to do is getting the pink-div to strech out
the whole height. And if there is as much data in the darkgreen, that
area should expand the pink div..</p>
<p>Welcome! What i would like to do is getting the pink-div to strech out
the whole height. And if there is as much data in the darkgreen, that
area should expand the pink div..</p>
</div>
<div class="clearer"></div>
</div>
</body>
</html>