Well this is a rather werid issue. For one reason or another I cant seem to get the content of a page to stretch down properly. If I set it up so that it ends at the footer, there is a gap of white space as shown here:
http://www.wartachicago.org/infohufie/
If i nest the footer in the content <div> i get the content all the way to the bottom of the screen as shown here:
http://www.wartachicago.org/wiadomsci/
Now my issue is, how do I get the content to stretch down to the footer and end there? Here is the css (I have only included the important parts here):
* {
padding:0;
margin:0;
}
img {
border: 0
}
body {
background-image: url("../../../images/xmasbackb.jpg");
background-repeat:no-repeat;
background-color:white;
}
#main {
width:980px;
margin-left:auto;
margin-right:auto;
}
#header {
background-image: url("../../../images/header_holiday.png");
background-repeat:no-repeat;
width:955px;
height:426px;
}
#wartal {
float:left;
padding-top:90px;
padding-left:98px;
}
#pos1 {
float:left;
padding-top:110px;
padding-left:115px;
transform: rotate(5.39deg);
-ms-transform: rotate(5.39deg); /* IE 9 */
-webkit-transform: rotate(5.39deg); /* Safari and Chrome */
-o-transform: rotate(5.39deg); /* Opera */
-moz-transform: rotate(5.39deg); /* Firefox */
}
#pos2 {
position:absolute;
z-index:1;
float:left;
padding-top: 175px;
padding-left:70px;
transform: rotate(-4.10deg);
-ms-transform: rotate(-4.10deg); /* IE 9 */
-webkit-transform: rotate(-4.10deg); /* Safari and Chrome */
-o-transform: rotate(-4.10deg); /* Opera */
-moz-transform: rotate(-4.10deg); /* Firefox */
}
ul#nav {
list-style-type: none;
font: 15px Tahoma, Sans-serif;
color:black;
}
li.navli {
list-style-type: none;
padding-top:8px;
}
ul#posts {
padding-left:25px;
}
li.posts {
padding-top:3px;
}
#content {
clear:both;
background-image: url("../../../images/body.png");
background-repeat: repeat-y;
width:909px;
min-height:450px;
overflow:hidden;
}
#posts {
float:left;
width:840px;
padding-left:55px;
position:relative;
}
.entry {
width: 840px;
margin-left:auto;
margin-right:auto;
}
#footer {
background-image: url("../../../images/footer_holiday.png");
width:955px;
height:204px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-right:25px;
clear:both;
bottom: 0;
display: block;
}
#fstuff {
padding-top:55px;
padding-left:200px;
}
any ideas?
