Advice on keeping footer to the bottom of viewport


https://forum.kartris.com/Topic501.aspx
Print Topic | Close Window

By thedrumdoctor - Wed 6 Apr 2011
Normally when I go for site design I like to use the excellent tutorial here about keeping footers to the bottom of a page which has worked well for me in the past.

However, because Kartris of course comes with its own pre-determined layout and functionality, trying to make this tutorial fit isn't really working for me, despite what I do with the master page or the CSS.

Therefore, I have a problem when the #pagecontent div shows lots of products, as it currently pushes below the footer, leaving the footer in the middle of the viewport.

I've tried position: absolute bottom: 0, made sure that the footer is set to clear: both so the floated elements aren't allowed below but it's not working out.

Has anyone else ran into this sort of problem? I can see there's a lot of other parsable elements being rendered when the pages are generated, but surely there must be a way to keep all the main content above the footer, no matter what part of a Kartris site is being viewed?
By Mart - Wed 6 Apr 2011
Hi,

do you have a link to your site, or is it being developed locally?

There is a similar setup to what you describe on this site www.bodysolid.co.uk

Its hard to see (as the pages are long due to the side bar) but if you open it in firefox and change the zoom (zoom out a lot) you'll find that the footer stays at the foot of the page, and whitespace appears above it. But it still works fine in terms of the footer appearing after content on a page of various lengths.
By thedrumdoctor - Thu 7 Apr 2011
It's a public accessible URL at this link and is still in early stages of development. I'm changing things so it's a two column fixed-width layout and want to get the skeleton in place before I go to the eye candy. The header's how I want it and there's two columns in the page body, but that footer needs to be pushed to the bottom even when there's a toilet roll of content being generated in the page body.

The template I use from the Matthew James Taylor website works on the principle of one wrapper containing 3 internal div's and use of absolute positioning. Out of the box, Kartris is .NET so its parent wrapper has to be a <form> with a more traditional wrapper nested below it. Plus there's a lot of other stuff going on generating content that needs to be rendered so my usual approach of building a framework with a permanently bottomed footer isn't working out.

I tried reverse engineering by kicking everything out of the style sheets and starting completely from scratch, but that proved to be a bit over ambitious! So now I'm working with what's already there which is easier, but it's just the footer that's being a pain now.

I'll have a look at your site as I'm actively trying to resolve this issue.
By thedrumdoctor - Thu 7 Apr 2011
UPDATE

I went back to working with the Matthew James Taylor layout and commented out the centrecontainer div, thus making the form container div the parent and reducing the children div's by one (hopefully, this won't reduce Kartris' functionality).

However, things still weren't working out and the pagecontent div was STILL pushing through the footer. However, getting rid of its float property and giving it an explicit left margin places the container where I want it without pushing it through the footer. Weird, considering that the footer has a CSS property of clear: both;

Anyway, it seems to produce the desired effect and keeps to WC3 standards.

By Paul - Thu 7 Apr 2011
We'll be adding some more kartris skins over time (we include 3 as standard with v1.3 which is to be released shortly).

While CSS and standards compliance is definitely the way to go, it can spring problems.

One of the common layouts is a three column, full width layout. This is remarkably difficult to achieve in CSS considering it is such a common layout. While it can be done, the CSS is so messy and difficult to hack that I feel it is still better to use a table with three cells to represent the three columns. I know it is heresy from a standards point of view, but it works, is simple, is easy to alter and works nicely on old browsers too.

I'll look into adding a skin with footer like on your example as I agree it is something you commonly see these days.
By thedrumdoctor - Fri 8 Apr 2011
There's yet another great example of the 3-column liquid layout on the Matthew James Taylor website apparently now without horrible Quirks mode.

I know WC3 standards is a pain at times, but for me personally, it's the only way I'll do sites having done the tables thing to death. The problems I can see with shopping cart websites (or any website that has its primary function as dynamically producing content) and WC3 standards are the technologies behind what's driving them. I guess that the way the technologies generate parsable HTML is way down the pecking order of functionality and not surprisingly so, considering the historical trail of mess that web browsers have left us with.

Having said that, Kartris is definitely a massive improvement Standards-wise in comparison to Cactushop.