« 'I taught it, they didn't learn it, it's on them' | Main | Interesting and Useful Links »

Fluid CSS With A Sticky Footer Fri 20 Mar 09

Adventures In Programming

The title makes this sound a lot more interesting than it really should be but does describes my latest adventure in programming.  You may have noticed that my blog has a new format primarily regarding how the main column appears.  It is now a variable width or "fluid" column that varies with the size of the browser window to maximize the viewable area.

Back at the beginning of February I rolled out a new blog format with slightly wider columns and different font to help improve the readability.  At that time I really wanted to have a variable or fluid main column that adjusted to the available screen resolution.  Unfortunately at that time I didn't have a clue on how to do that so I set the page width to 1360 pixels and left it at that.

Since that time I've discovered a "fluid CSS" (cascading style sheet) technique and have now applied it.  If you "restore" your browser window and adjust the size you will see that the 2 sidebars stay a fixed width and the main column is fluid.  That is, the main column is fluid in that it is the changing element as you change the size of your browser.

This technique allows me to use up to 100% of the browser window regardless of how the size is set.  Although this provides a great deal of flexibility in adjusting this column width, I have set both a minimum and maximum width for readability.  Too narrow and it is difficult to read and likewise too wide and it is hard to read or scan.

There are a number of sites that explain how to do this.  In this case I simply created a new test blog within Typepad and using their custom theme builder and opted for a fluid width for the main column.  I then examined the CSS code to see how it worked and applied that to my CSS.  Very straightforward and simple but this is where the adventure began.

Duct_tape_House_Of_SimsI have a footer on the bottom of the page and with the ability of the columns to change width which then also change the height of the main column the footer wanted to float and not stick to the bottom.  Fortunately, I was able to find a solution on the Internet.   Where would you look for instructions on how to adjust your CSS code to make the footer stick to the bottom?  Why, www.cssstickyfooter.com naturally!  The Internet being the wondrous thing that it is seems to contain an answer for everything.

The instructions were simple and clear and I quickly implemented them only to find they didn't work.  For some reason, the right sidebar which was the longest extended past the footer.  If I decreased the width of the browser window thereby narrowing and lengthening the main column window the footer would eventually get back in place.  No matter what I tried I couldn't seem to get it to work even with alternate solutions I found on the Internet.

After a long and tedious effort I was about to give up when the issue really came into focus.  The problem wasn't with the footer, it was really sticking as it should.  The problem was that the longest column would overflow the container.

Having now determined the correct problem I set out to make all of the columns the same height.  Again, I found a number of solutions on the Internet but none seem to work well with a fluid column.  Ultimately, taking a clue from all of the source I put the main column in a new container and the other 2 sidebars in a separate column but this alone didn't help. 

Ultimately I hard-coded the sidebar container to a minimum height to force the body to have at least a minimum height when the main column was less than the sidebar.  This allowed the footer to stick which is what I was trying to do.  In addition I needed to modify the sticky footer solution to remove the extra padding-bottom and negative margin-top and it all finally worked.

A real programmer would call this solution "inelegant" as best.  If I have to add or take things from the sidebar I may have to adjust the CSS code.  However at this point it works and I'm sticking with it (pun intended)

In doing this it reinforced some things I've always known but had forgotten:

  • I enjoy the challenge of programming -- up to a point.  The problem is that point came about halfway through this process.
  • I could never make a living as a programmer.  It takes a certain talent I don't have.
  • The best way to solve a problem is not to become fixated on a possible solution.  That was what I did here -- fixating on what I thought the problem was even though the clues to the real problem were there all the time.  If I had been more open minded I would have gotten to the solution much sooner.

Well that's my story, I hope you can learn something from my trials.

"duct tape" photo by House Of Sims

            Tell A Friend Tell a Friend    View blog reactions   Bookmark    rss RSS Feed


TrackBack URL for this entry:

Listed below are links to weblogs that reference Fluid CSS With A Sticky Footer:



tell_a_friend Tell a Friend About Mike's Blog

Creative Commons License 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.

My photos on
Mike Schaffner's items Go to Mike Schaffner's photostream

Free Subscriptions
  Free RSS Subscription

Free RSS Subscription

For An Email Of New Articles
Enter your email address:

Read On Your Mobile Device


Join the Conversation
Subscribe to Comments
  Free RSS Subscription

For New Comments Email
Enter your email address:

This is the personal blog of Michael W. Schaffner. The opinions expressed in this blog are soley mine and those of commenters. You should not infer that these opinions are the opinion of or have been endorsed by any current or former employer.

Please review the Privacy Policy.   I do love comments and trackbacks but I do reserve the right to remove any that don't comply with the Comments and Trackback Policy.  Rather than clutter up the front page with badges and statistics that are of little interest to anyone other than me I thought it would be best to establish a separate page for statistics and rankings.

Copyright © 2006, 2007, 2008, 2009 Michael W. Schaffner       You may copy or quote sections of this blog if you provide an attribution consisting of a reference to the Michael Schaffner and ''Beyond Blinking Lights and Acronyms" along with a hyperlink (if a web reference) to the blog posting.     

Creative Commons License 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.