How to Stick a Footer to the Bottom with CSS

+++++++++++++++++++++++++++++++++++++++++++++++++++++
PLEASE NOTE: This technique has been updated & streamlined for HTML5.
Click here for the updated post
+++++++++++++++++++++++++++++++++++++++++++++++++++++

CSS footer problem

Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.

The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.

 

Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.

Simples:)

I’ve created a starting template for all sites I create. You can download it here.

It contains a html file & css starting point. I’ve also added a header along with the footer & content divs. Its 800px wide and centred. its fairly simple to figure out & modify. Have a look.

myAnalytics iPhone App

myAnalytics

There’s a new Google Analytics App for the iPhone available on iTunes from yesterday. Its keenly priced at €1.59 and displays a graph of visits and other dashboard metrics. It has support for all the websites in your account or all attached to your particular email address. Set up is pretty simple. After installation go to Settings -> myAnalytics on your iPhone and add in your Google Analytics account email address, password and choose your date range (year, month, fortnight, week, day) and your done.

The only down side I can see so far is that it seems to download all the information from Google before displaying the data. As i’ve about 40 profiles in my account, this takes alot of time. The ability to choose which account you want to view before downloading the data would help speed up the app alot.

Version 1.1 is already in development and promises to contain graphs for all the basic dashboard site usage metrics. Sounds good but i’d much rather see data for other metrics like content, traffic sources and keywords.

More info can be found at www.iphone-analytics.de and you can go directly to myAnalytics in iTunes

myAnalytics

myAnalytics

Google Analytics on iphone

Google Analytics For Iphone

Google Analytics For Iphone

I’ve had my eye on the iphone for a while now but was put off as Google Analytics is limited due to the absence of Adobe Flash. Unable to resist anymore (and the €99 price tag with an upgrade from o2) i took the plunge and got the 8G model.

A quick search on Google and i found http://www.apple.com/webapps/utilities/googleanalyticsforiphone.html
A German lad called Sergej Mueller is working on an analytics app. Unfortunately the site is all in German and the App is still in development but you can display graphs of visitors & page impressions for the previous month. It’ll be interesting to see where this app goes from here.

To use the app (which is just a web page for now) browse to http://analytics.ebiene.de/ on your iphone and select settings. Enter your Google account username & password and also the account ID of the analytics account you want to view. This can be found in the URL of the specific account as seen below.

Google Analytics Account ID

Google Analytics Account ID

You can also specify multiple accounts by separating the ID’s with a comma.

Support can be found @ http://playground.ebiene.de/ Unfortunately the site is all in German…..

Have a look at another post about myAnalytics, an excellent iPhone app for Google analytics.

Excellent List of Articles on Web Design

Excellent list of articles from Inside CRM entitled 101 Five-Minute Fixes to Incrementally Improve Your Web Site. All the articles are organised in 6 topics:
Copywriting
Usability
Search Engine Optimization
Accessibility
Design
Legal

http://www.insidecrm.com/features/101-web-site-fixes-031808/

Dixons Wedding Cars Website Design

Dixons Wedding Cars Website Design
Dixons Wedding Cars Website Design

I launched this website a few weeks ago for Dixons Wedding Cars in Dundalk.  Its a static website with lots of images displayed by the Lightbox script (extremely overused script & i’m more guilty than most for this). The content is incomplete i know but they decided to launch while it is being written. Turns out to have been a good idea as the sites performance has been excelent with lots of enquiries & bookings.

You can view the site at Dixons Wedding Cars