Log in

View Full Version : CSS Vertically Growing Body



mandus.za
09-01-2010, 11:50 AM
Hi Guys!

First of all, great site/forum I've really been able to resolve most of my problems through searching through the forums.

I am however stuck now with a problem that I can't seem to resolve so I am making a new post. Sorry if I am re-posting something.

I am pretty new to CSS so this is probably a very easy fix, but I just cant seem to get it to work.

First of all, the problem is on this page, I will display the CSS code at the bottom of the post.
http://www.esports-zone.co.za/index.php

I am having problems with the #wrapper div dynamically growing with the #articleBody div, and pushing down the footer as people add new comments.

At the moment, the #articleBody div is just growing over the other tow div's.

I am kind of pressed for a solution as the site needs to be finished by tomorrow evening. So any help would be greatly appreciated.

Thanks.
M

CSS Code:

@charset "UTF-8";
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
background-color: #363636;
text-align: center;
}
#siteSelector {
background-color: #000;
background-image: url(../images/siteSelector.png);
background-repeat: repeat-x;
height: 45px;
width: 100%;
top: 0px;
}

#container {
width: 100%;
padding-top:8px;
background-image: url(../images/esz-rep2.jpg);
background-repeat: repeat;

}
#wrapper {
margin:0 auto;
width:1024px;
height:auto;
background-color:#a1a0a0;
padding-top:13px;
padding-left:20px;
padding-right:20px;
position: relative;
}
.rounded-corners {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
}
.headers{
-moz-border-radius-topright:7px;
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
border-top-left-radius:7px;
border-bottom-right-radius:7px;
}

#identifier {
height: 100px;
width: 100%;
background-image:url(../images/siteID.png)
}
#menu {
background-image:url(../images/menuRepeater.png);
background-repeat: repeat-x;
height: 27px;
width: 100%;
}
#body {
width: 100%;
padding-top: 15px;
height: 1030px;
font-family: Arial, Helvetica, sans-serif;
}#bodyLeft {
float: left;
height: 1023px;
width: 787px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#bodyRight {
float: right;
height: 1023px;
width: 175px;
position: relative;
}
#articleHeader {
height: 23px;
width: 100%;
background-color: #8e937b;
}
#articleBody {
height: auto;
width: 100%;
background-color: #e0e0e0;
font-family: Arial, Helvetica, sans-serif;
overflow: visible;
position: absolute;
}
.multiline {
background:url(images/multilineDivider.png) repeat-x;
height:12px;
border:none;
}
.articleHeader {
font-family: "Arial Narrow Bold", "Arial Narrow", Arial;
font-size: 22px;
float: left;
padding-top: 18px;
padding-right: 17px;
padding-left: 17px;
color: #323232;
}
.rate {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
float: right;
padding-top: 30px;
padding-right: 17px;
padding-left: 17px;
color: #323232;
}
.articleText {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #323232;
float: left;
padding-left: 17px;
clear: left;
line-height: normal;
}
#leftColumn {
float: left;
width: 465px;
padding-top: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#rightColumn {
float: right;
width: 315px;
padding-top: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.articleEntry {
font-family: "Arial Narrow", Arial, "Arial Black";
font-size: 18px;
color: #323232;
float: left;
padding-left: 17px;
text-align: left;
}
.rightText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #323232;
text-align: left;
padding-left: 15px;
}
.rightTextList {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #323232;
text-align: left;
padding-left: 15px;
font-weight: bold;
list-style-type: none;
list-style-image: none;
}
#footer {
height: 359px;
width: 100%;
}
#footerwrap {
width:1024px;
height:359px;
background-color:#464340;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
}