Vertically elastic site

[jhatter]

Hi,

Newby question.... please can someone suggest a way of making the #content section of my website vertically 'elastic' to allow for more content as-and-when required. ie #content expands downwards and #footer moves with it.

Minimum height of #content section would be 340px.

I have included the CSS (but obviously everything).

I'm assuming this is all you will need, but if you require any other info - please let me know.

Thanks!

body {
text-align: center;
background-color: #FFFFFF;
background-image: url(images/frun-body-grad.jpg);
background-repeat: repeat-x;
background-position: top;
}

#master {
width: 810px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
height: auto;
}

#header {
position:absolute;
left:0px;
top:0px;
width:810px;
height:300px;
background-image: url(images/frun-header.png);
background-repeat: no-repeat;
}

#content {
position:absolute;
left:0px;
top:300px;
width:810px;
height:340px;
background-image: url(images/frun-content-bg.png);
background-repeat: repeat-y;
}

#footer {
position:absolute;
left:0px;
top:640px;
width:810px;
height:50px;
background-color: #FFFFFF;
background-image: url(images/frun-footer.jpg);
background-repeat: no-repeat;
background-position: bottom;
}

[codeexploiter]

You can specify a auto height on all elements that needs to be fit with the content. From the CSS you've mentioned in your post it seems that for most of the items you have set an explicity height value.

Certain containers will have a specific height but the element whose height you don't know should be a auto height element like the following manner:


height:auto;

Most of the sites will have a main content area whose height will be auto may be you can have a min-height if you want. So that even if there is no content the element will have a minimum height.

Hope this helps.

[jhatter]

Thank you for your reply.

Unfortunately simply specifying "auto" in the height of #content does not work.The #footer which has a "top:640px;" stays where it is.

How can I put an auto in height and get the footer to always be immediately below the #content?

Thanks

[codeexploiter]

Can you provide a link where I can see your page in question? This would help me (or any other one) to correctly guide you.

[jhatter]

Hi

I've just put these pages up. They are not fully functioning but highlight the problem:

1) The text over runs in these examples and the footer is positioned correctly: http://www.actonfunrun.co.uk/about_css.html
http://www.actonfunrun.co.uk/past_events_css.html

2) This example works, because the text fits within the #content height:
http://www.actonfunrun.co.uk/get_involved_css.html

Thanks in anticipation of your help!