CSS Forum

**Slick Nick** · 07-16-2007, 07:10 PM

What im trying to do is make an area/box for content on a template im making for a site. Basically there is 3 main divs for the box. The top piece, which has the 2 top corners and a small image which stretches across to fill the gap. There is also a bottom piece which does the same thing. then there is the middle piece.

In the middle piece there are 3 more divs. 1 for creating the border on the left side, one for the right side and one where actual content would go.

Basically my problem is that I cant seem to get the 2 sides to stretch down to the bottom, instead they only stretch part way, even though their height is set to 100%.

You can see what I mean here: http://helmgames.com/random/wiicods/template.html

The CSS:

Code:

body{
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}
#headerDiv{
    height: 104px;
    width: 100%;
    background: url(images/stretch.jpg) repeat-x;
}
#navwheel{
    width: 147px;
    height: 418px;
    background: url(images/navwheel.png);
    position: fixed;
    right: 0px;
    z-index: 2;
}
#sidebar{
    width: 337px;
    height: 171px;
    background: url(images/sidebar.png);
    position: fixed;
    right: 0px;
    z-index: 1;
}
#container{
    width: 100%;
    height: 80%;
}
#conttop{
    height: 17px;
    background: url(images/tl.jpg) repeat-x;
    width: 70%;
    position: relative;
    top: 50px;
    left: 20px;
}
#contbot{
    height: 17px;
    background: url(images/bl.jpg) repeat-x;
    width: 70%;
    position: relative;
    top: 50px;
    left: 20px;
}
#contentbox{
    background: #f0f0f0;
    width: 70%;
    min-height: 75%;
    position: relative;
    top: 50px;
    left: 20px;
}
#leftline{
    background: url(images/ll.jpg) repeat-y;
    width: 17px;
    height: 100%;
    float: left;
}
#rightline{
    background: url(images/rl.jpg) repeat-y;
    width: 17px;
    height: 100%;
    float: right;

}

the HTML:

HTML Code:

<html>
<head>
<title>WiiCoDS Template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="headerDiv"><img src="images/logo.jpg"></div>
<div id="navwheel"></div>
<div id="sidebar"></div>

<div id="container">
    <div id="conttop">
        <img src="images/tlc.jpg" style="float: left;"><img src="images/trc.jpg" style="float: right;">
    </div>
    <div id="contentbox">
        <div id="leftline"></div>
        <div id="rightline"></div>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dfdf
    </div>
    
    <div id="contbot">
        <img src="images/blc.jpg" style="float: left;"><img src="images/brc.jpg" style="float: right;">
    </div>
</div>
</body>
</html>

**Angelosanto** · 07-17-2007, 12:52 PM

OK, firstly, in future you should include all of the code, as the problem you have lies in the part that you didn't include

Basically, the reason height:100% isn't working as you would like, is because it is extending to the full height of the parent element, which is the div with the id of 'contentbox'. You want it to be the same height as the 'content' div.

Hope that was a help

**LadynRed** · 07-17-2007, 04:16 PM

And the parent div won't stretch to 100% unless you put this in:
htm, body{
height: 100%;
}

**Slick Nick** · 07:00 PM

actually I did include all the code when I posted this, its just that I updated it later with some more stuff (problems still there though).

Thanks though, il go try and do that.

*edit* seems to work

, some minor problems but I will just settle for some work arounds.