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 { position: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.