I am busy designing a website for a client. It is still a work in progress, but can viewed at at www.kooganfoods.co.za

If you have a look at this page - http://www.kooganfoods.co.za/News.aspx, you will notice that there is very little information on the page, and this causes the information in the footer to be brought right up, almost half-way up the screen.

What I would like to do is set a minimum height for the main container, the sitecontent-wrapper div. Preferably a CSS solution.

I've heard about setting the min-height CSS property, but not sure if this is cross-browser compatible, or if there is a better way to do it.

Please assist. Thanks in advance.

2 answers

This was chosen as the best answer

you mean minimum height?

that's easy, as even IE uses height as a minimum and expands containers.

a simple CSS rule like:

#sitecontent-wrapper {
background: #F6F6F6 url('content-wrapper.gif') repeat-y center top;
min-height: 400px;
height: auto !important;
height: 400px;

should work for you.

Answered over 9 years ago by Tony Crockford
  • Yes I meant minimum height, stupid mistake. I'll update the question & title. Thanks for the response. Saajid Ismail over 9 years ago
BPartch 342

If you are interested in 100% height, check this out: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answered over 9 years ago by BPartch