No replies
bambam007
bambam007's picture
Offline
newbie
Last seen: 8 years 47 weeks ago
Timezone: GMT+10
Joined: 2011-09-13
Posts: 1
Points: 2

This is a new forum for me, hello all!

I am creating a layout with only one column
header content footer
content expands as its contents do.

I have this much working.

The problem is:
I want a background div [bg_container] to to fill the height of the content div.
The background is comprised of images to give variation - top fill and bottom
In the code below I have used background fill colours for testing. The bg_t and bg_b is a fixed height, and the bg_expand is expandable.

The way it is at the moment, the text appears on top of the background image. I can get it to appear over the top with absolute but then I lose my layout and the background still doesn't expand.

Can anyone see the solution?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
<title>content expand container - bg fill container</title> 
    <style type="text/css">
        html,
        body {
            background-color: green;
            margin:0 0 0 0;
            border: none;
            padding:0;
            height:auto;
        }
        img{
        border: 0 none;
        outline: 0;  
        }
        #container {
           position: relative;
           top: 0px;
           margin: 0 auto;
           border: 0;
           width: 1152px;
           padding: 0;
        }
        #header {
            background-color: blue;
            position:absolute;
            top:0px;         
            width:100%;
            height:100px;
            padding: 0;
            margin: 0; 
        }
        #content {
            position: relative;
            height: auto !important;
            padding-top:100px;   /* Height of the header */
            padding-bottom:100px;   /* Height of the footer */
            margin: 0;
        }
        #text_container {
            position: relative;
            display: block;     
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            height: auto;
            z-index: 2;
        }
        ul {
            border: 0;
            font-family: arial, helvetica, sans-serif;
            font-size: 13px;
            color: fuchsia; 
            font-weight: bold;  
        }
        #bg_container {
            position: relative;
            display: block;
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            height: 100%;
            z-index: 1;
        }
        #bg_t {
            position: relative;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            top:0px;
            height: 100px;
        }
        #bg_expand {
            position: relative;
            background-color: #787878; 
            margin: 0 auto;
            border: 0;
            padding: 0;
            height: auto !important;
            min-height: 100px;
        }
        #bg_b {
            position: relative;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            height: 200px;
        }
        #footer {
            background-color: blue;
            position:absolute;
            bottom:0px;         
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="text_container">
        <ul>
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />            
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
        </ul>
        </div>
        <div id="bg_container">
            <div id="bg_t"></div>
            <div id="bg_expand"></div>
            <div id="bg_b"></div>
        </div>
    </div>
    <div id="footer">footer</div>
</div> 
</body>
</html>