[RESOLVED] fixed height

[kingdm]

Hello everyone.

I've been struggling for the time I'm trying to dynamically add a content of my homepage. The problem is when my homepage is empty the footer also moves up from the content, destroying the physical looks of the website. Now I want to have a fixed height (or should I say boundary) for the footer not to pass through. How can this be done in a CSS? The div with "content" style is where all my dynamic content (via php) is placed. It is working fine if it has a content, the problem arise when it is empty. The footer eats the place which should be for the content.


html, body {
margin : 0px;
padding : 0;
}
body {
/*font : 73% Arial, Verdana, Arial, Helvetica, sans-serif;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background : #ccc url(images/bg.jpg) top center repeat-y;
color : #555;
}
/*WRAP*/
#wrap {
width : 770px;
margin-left : auto;
margin-right : auto;
padding : 0;
color : #555;
background : transparent url(images/wrap_bg2.jpg) repeat-x;
}
/*BANNER*/
#masthead {
background : url(images/pamscorp_header_black.jpg);
height : 178px;
padding : 0;
margin-bottom : 0;
}
/*MAIN CONTAINER*/
#container {
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 10px;
padding : 0;
line-height : 1.8em;
}
/*REGISTRATION MAIN CONTENT*/
#content2 {
padding : 1em;
margin : 0 0 0 0;
border-right : 1px solid #eee;
}

/*MAIN CONTENT*/
#content {
padding : 1em;
margin : 0 240px 0 0;
border-right : 1px solid #eee;
}

/*SIDEBAR*/
#sidebar {
float : right;
width : 200px;
height: 500px;
margin-top : 0;
margin-left:10px;
padding : 1em;
}
/*FOOTER*/
#footer {
clear : both;
height : 60px;
padding : 0;
margin-bottom : 0;
margin-top : 40px;
font: 90% Verdana, Arial, Helvetica, sans-serif;
text-align : center;
border-top : 5px solid #E80202;
color : #fff;
background : #000;
}
/*TYPOGRAPHY*/
h1 {
float : left;
margin : 0;
padding : 50px 0 20px 25px;
font : 150% Verdana, Arial, Helvetica, sans-serif;
letter-spacing : 5px;
color : #fff;
}
h2 {
float : right;
margin : 0;
padding : 25px 20px 20px 0;
font : 85% Verdana, Arial, Helvetica, sans-serif;
letter-spacing : 3px;
color : #E80202;
}
h3 {
margin : 0;
padding : 20px 0 10px 0;
border-bottom : 1px solid #aaa;
font : 145% Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
text-transform : uppercase;
letter-spacing : 3px;
color : #E80202;
}

h5 {
margin : 0;
padding : 0 0 0 0;
border-bottom : 1px solid #aaa;
font : 1% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif;
text-transform : uppercase;
letter-spacing : 3px;
color : #E80202;
}

blockquote {
font-weight : bold;
font-style : italic;
border-bottom : 1px solid #aaa;
border-top : 1px solid #aaa;
color : #b29b35;

[tjedgar]

min-height on your content block works for this in all browsers except IE6, the solution I use to combat IE6 is to put an empty div floated right in your content div with a width of the padding you would normally have there and the height you want to have as a minimum

[ArtphotoasiA]

You can use a min-height (best solution) or an empty div inside or a clear.gif trasparent image (orrible solution but can help)

[Paul916]

min-height on your content block works for this in all browsers except IE6, the solution I use to combat IE6 is to put an empty div floated right in your content div with a width of the padding you would normally have there and the height you want to have as a minimum

This solution will work for IE6, however there is a simpler way.

I'm assuming you've got a separate stylesheet for IE6 hacks, or have wrapped an additional div using conditional comments to target IE6.... in this case just use min-height for all modern browsers, and the save value for height for IE6. IE6 treats height the same way other browsers treat min-height.

[kingdm]

Thanks guys it worked. I've been away on my laptop for quite a while, that's why I did only reply today. Thanks once again. :)