Sometimes CSS is a total pain.
We encountered a major CSS problem while working on our incredible startup weekend project Ollert. We had created a footer that we wanted below all of our content. We threw together some quick HTML and got a footer below all of the main content, and it looked really good when our main content filled up the entire screen.
What about when there was very little data on the screen? Well, then the footer just floated in the middle of the page, staring at us like some kind of psychotic hummingbird, waiting to slice you up when you’re not looking. We searched online and found lots of different solutions; None of them worked. The footer just floated there, taunting us; Telling us to cry home to mommy. So we gave up on the prospect for the rest of the afternoon.
A few days after startup weekend, I found the real solution from the good folks at Twitter Bootstrap themselves. It’s pretty simple, really. Hooray for the internet!
Below is the HTML to create this effect with all the CSS styles embedded. Marked up with plenty of comments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Div tag ids such as “wrap”, “push”, and “footer” can be whatever you want. The height of the footer can be adjusted to fit whatever content you want; I found that using
min-height instead of
height allowed my content to resize appropriately when wrapped. Styles should definitely be moved to a css file.