After hours of trying different methods, I'm just about ready to give up on this. The site I'm trying to make is at http://thekinetik.com/rivstuff/117/tableless.html . What I want to be able to do is make the centre column the full height of the browser window. The footer is to be displayed at the bottom of the window if the content doesn't reach down that far, but if it does, I want the footer to be pushed down farther, beyond the visible area (ie. it will still appear at the bottom, after scrolling down all the way). Essentially, what I'm trying to achieve is this - http://thekinetik.com/rivstuff/117/index.html . So far, I cannot find a way to do this. The style sheet for the tableless design is at http://thekinetik.com/rivstuff/117/test.css
Can anyone out there offer any advice?
It sounds like you're experiencing something I once had a problem with. I asked about it some time ago in [url=http://www.csscreator.com/css-node/ post[/url] and the solution given works great in multiple browsers. If you have any additional questions, please post them in this thread and not that one...
Problems with height
Hmmm. I still seem to have some trouble getting it to work. For my site, I've made a container that is centered in the screen, then inside that, I've got the header image (it isn't inside it's own div). Below that is another container to hold to top menu, which is floated to the left. then below that is a container to hold the side menu, which is also floated to the left. Then another container to hold the content, once again, floated to the left. Now, if I understand what Bruce said in the other thread, I should place the spacer div next, then I should close off my main centre container, and place my footer div after that. So, it would be something like this...
<main container, centered on the screen> <header image> <top menu container, floated to the left> <side menu container, floated to the left> <content container, floated to the left> <spacer div, which just contains clear: both, and nothing else> </main container, centered on the screen> <footer div>
But that still doesn't seem to work for me. I also tried it with putting the footer inside the main container, just after the spacer div with no luck. Am I missing something here?
I compared your tableless and 'tableful' pages and don't see a difference except for text size...
But in trying to understand, your remaining issue is to stretch Header 1 to the max height of the browser window (no matter how little data it contains), but with the footer still displaying, is that correct?
Problems with height
Yeah, the text sizes are different. I just tweaked the design a bit after changing to tableless. Just ignore that for now
Hmmm... Header 1? I'm sorry, but what did you mean by Header 1? It sounds like you understand what I want, but have worded it in a way that is different to my understanding (or maybe you just typed the wrong word by mistake, hehe). What I want is -
If the content of a particular page is small enough to fit on a single screen, I want the footer to appear at the bottom of the browser window, and the 'centre column' that I have on my site (the thing that is a slightly lighter colour, that holds the header image, menu, content etc) to 'stretch' down' to the bottom, so it looks like it flows onto the footer. Essenatially, I want the background colour of the centre column (along with its side borders) to fill in the gap of nothingness, and cover up the page's background colour.
If the content of a particular page is too big to fit on a single screen, I just want the footer to appear right after the content finishes. So, essentially, when the user scrolls all the way down, the footer is at the bottom, with the content right above it.