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.
I 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