Click to See Complete Forum and Search --> : Hey CSS gurus...
Can anybody help me find the error in my code? I'm trying to get the footer to stick to the bottom when the content area is small, and then expanding as the content expands. So far, I can get one or the other, but not both. Here's the code I'm working with: http://www.aceservermanagement.com/joomla/templates/ace_server_mgmt/css3.html *bows to the mighty CSS Gods*
Patrick Shannon
06-12-2007, 08:23 PM
I take it that you want that div with "fffff" on the bottom? You need to lose the absolute positioning and do a "clear: both" to get it to clear the brown, blue and peach columns and fall underneath them.
thanks I'll see what I can whip up.
I think with the way suggested you will only satisfy one result. I think the only way to have it do both use to use javascript. With the way patrick Shannon suggested the footer will only clear your content div but, it won't sit at the bottom if that div is to small. Promably the best way to do this is to use javascript and get the height of the screen then compare it with the height of your div's and if those divs, are smaller then screen height have the div use the absolute positiioning. There isn't any other way I can really think of doing both without the use of client side scripting.
What I'm thinking might also work is to use percentage based heights have one div and within that div place a content and footer div with percentage based heights. So that both add up to 100%. Then set the content div overflow to to visible so when the content gos beyond the viewable area it expands and so will your footer. I'm not sure if this solution will yield the results but, its something I would probably do a trial and error on.
JPnyc
06-13-2007, 02:39 AM
It depends. If you don't have any content that is longer than a screen, then you can make a parent element around all your content, and make it a fixed height, then put the footer beneath it. When the content fills up the parent element, fine. When it doesn't, you'll have blank space between the end of the content and the footer, but the footer will remain on the bottom.
If you have content that is longer than a page in height, then you must use JavaScript.
Patrick Shannon
06-13-2007, 05:22 PM
Ah, okay....I slightly misunderstood. Yeah, this is a trickier situation. Like JPync said, min-heights would probably help. I'm not sure if that (alone) takes into account the size of people's browsers and screens stretched out it it "absolutely" has to hug the buttom, though.
JPnyc
06-13-2007, 05:47 PM
If it weren't for IE 6 you'd be able to do that yeah. That would be the ideal way to do it. Unfortunately, IE 6 doesn't understand those commands.
Patrick Shannon
06-13-2007, 07:10 PM
You can maniuplate the CSS a bit to trick IE6 into min widths and heights. I did it all the time at my old job.
JPnyc
06-13-2007, 08:00 PM
Well tell us how!:D
Patrick Shannon
06-13-2007, 09:08 PM
Indeed. Use the following code like so (in this order) whenever you want a min height/width/whatever:
height: 300px;
min-height: 300px;
height: auto;
Set your min-height and height (or width) to the same thing. Works like a charm in IE6. My own website (cultureinnovation.com) uses this in the content areas.
Yeah I got it working with min heights. stupid IE