Help needed on 100% height problem!

[simon.cannon]

Hello

I am currently working on a project that requires 100% height, and to be honest I am struggling! If you look at the URL I have provided you will see the layout. What I need to achieve is a min height of the main content area of 400px, with the brochure download button in the left column to be fixed to the bottom, thus if more content is added then the brochure download button will always appear at the foot.

http://client.3tcreative.com/csstest/

If anyone could help I would be extremely grateful.

Regards, Simon

[boogyman]

WOW div overload.
your page is flooded with overused divs. you are nesting divs within divs within divs, without any content in the middle div, thus creating extraneous code usage, eg duplicating the effect of a table in a small way. it can be confusing to use body as an id or class. I would suggest changing it to content or mainBody or soemthing to that sort.

now to talk about height question. Its generally advised to keep things from top to bottom, in accordance with importance. If you are moving the brochure to the bottom your are subconsciously saying its not important, and will be interpretted initially as that in the pysche of the clients that view your page.
creating the column that is 400pixels tall at a minimum would be very easy

div#leftnav {
     height: 100%; 
     min-height: 400px;
}

now you have to take caution on that because Internet Explorer in all its uselessness doesn't fully support the min / max width and height properties, so will have varied results. I it might have been corrected in IE7 I do not know, however I know that in IE6 and below its still an issue.
the issue here is really getting the download image and caption to the bottom of the column, that is an entirely different task, because by default any element is only as tall as the elements that are contained within; therefore the leftnav column would not want to expand to put the download at the bottom.
The best possible way I can think of to force the content to be put at the bottom of the nav is to use a combination of javascript and css. I do have to warn you though people with javascript disabled will be able to use this to their benefit.

// delete whats in magenta(pink), i got the placement wrong

Edit:

<script type="text/javascript">
function setElHeight(el, offset) {
     var element = document.getElementById(el,offset);
     var offset = document.getElementById(offset).style.pixelHeight;

     element.style.height = offset+"px";
}     
</script>

put that in your head tag

put this in the body tag where you are calling the nav, and be sure to put the nav of the id taht you are using for the main content where the blue text is currently

<div id="leftnav" onload="setElHeight(this, 'body');return false">
....
</div>

put this in your css style sheet

div#brochuredownload {
     position: relative;
     bottom: 0;
}

in theory that should work, however I havent taken the time to test it, so it may(probably) wont. Good Luck

[simon.cannon]

Hey Boogyman

Thanks for taking the time to look at this for me! I'm going to put it on a div diet!