How to fix page height problem?

HTML & CSS
1

Hello all. I have a problem on my site I am trying to figure out how to fix.

I have a page with little content on it, and the footer is creeping up too high:
Contact

I know there is something called ‘minimum height’ and was wondering if someone could tell me what to insert into my template css file to correct this.

2

Hi fifthhouse

I see your using Joomla 1.6 :slight_smile:
I’ve been meaning to have a play around with their new table-less templates, you’ll have to let us know how you get on.

quick solution
#container {min-height:400px}

you might also want to have a look at the sticky footer approach, check the faq and sticky threads at the top of the page for links.

3

Thanks very much for your help. I tried the quick solution but that doesn’t work because of different amounts of content. The sticky footer looks like what I need but unfortunately I’m not skilled enough to do this. I have a develop I’ll ask to do it.

With Joomla 1.6 so far so good. There are little bugs here and there, but for the most part it has been going well. I’m not very experienced with website software but I used to use Joomla 1.5 and 1.6 does have a lot of nice features and is better laid out all around.

4

Hi,

Assuming your header and footers are a fixed height on all pages then you could just add the following CSS at the end of the CSS files as they need to be more specific.



/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
}
#wrapper:after {/*instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
html,body{
    margin:0;
    padding:0;
    height:100%;
}
#wrapper{
    min-height:100%;
    margin-top:-241px!important;/* footer and header heights combined*/
    position:relative;
    z-index:1;
}
* html #wrapper{height:100%;}
#container {
    padding-top:261px;/* header and footer height + 20px extra */
    min-height:0;
}
#headerWrap{
    position:relative;
    z-index:2;
}
#footer{height:104px;overflow:hidden}

The above is all new css and should be added at the end and the original left untouched.