CSS - problem with fixed height div

Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!

Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1

Here's the relevant CSS:

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { 开发者_如何学JAVAposition:relative; }

div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}

div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}

Here's the relevant HTML:

<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
  <div class="comcon abs" style="opacity:none;">
    <div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">

        <?php
            if($_GET['page'] == "profile") {
                include_once('profile.php');
            }
            if($_GET['page'] == "editprofile") {
                include_once('editprofile.php');
            }                   
        ?>  

    </div>
  </div>
</div>

---

Do this:

body.combody {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
    background-origin: padding-box;
    background-position: left center;
    background-repeat: repeat;
    background-size: 110% auto;
    height: 100%;
}

div.comborder {
    background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
    border-radius: 30px 30px 30px 30px;
    height: 100%;
    width: 900px;
    z-index: 10;
}

What is important to notice is that both the body and the div have a 100% height.

That might help you.

---

Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.

Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.

More general advice:

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }

These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:

.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }

It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.