Our Mindfly Blog

Website Design and Development

Random creative design element

Fashionably Late

by Karina Beattiger 26.March 2008 08:54

It's a wonder my brain registers on any sort of scale at all.  I swear, my mother must have given up on me at an early age.  "Can't see the forest for the trees" is definitely something I've long had to resign myself to.  I'm not so hot on the bigger picture.  I leave that up to the Flying Spaghetti Monster and all his Noodly Greatness.

This post is about my tendency to be fashionably late to all things.  Parties.  Appointments (although not this job interview, thank goodness!).  Meetings with friends.  Even to my own ideas.  I don't know how many times I've looked at A List Apart to check my own work, utilizing great ideas and generally just brushing up with their articles.  Thanks to WD Weems' early efforts to prepare me fo rthe great wide world of web design (and all its pitfalls), I particularly like this little gem here, and have used this method quite a bit in my endeavours of both personal and professional status.

So there I was, checking why my dang footer wasn't going below the rest of my work, when this particular bit of text reached out and slapped me in the face: Finally, we give our footer div a clear: both style to ensure that it remains below the rest of our content, regardless of which side is longer.

I've never done this.  Now, I say "never", but I'm fairly sure I've done it when I first did this how-to.  Beyond that?  Never.  Ever.  What the heck?  How could I have forgotten that?

I apply the clear: both style to my footer, so now the code looks like this:

div#site_info
{
    position  : relative;
    width      : 957px;

    height    : 50px;

    clear      : both;

}

Ooookay.  Apply, refresh and... Hello!  The footer moved down, stayed down, and isn't cutting off my content anymore.  Brilliance. Meanwhile, overflow: hidden on the container holding my columns is cutting things off left and right.  I'll have to explore some and see how this can best be applied to WD Weems' post on (ironically, also being fashionably late to the party) the new(old) way to clear floats.  Of course, if I was supposed to be doing this the whole time, this begs the serious and intellectual question of: How the heck did my footers work without it before?

As WD Weems likes to say, "How do you break the most simple of tools, Karina?"  ...Ummm.  It's a gift.  From the Flying Spaghetti Monster. And I've been touched by His Noodly Appendage.

Well, that and I'm still learning.  A lot.  One day, this will all make sense to me!  Practice does make perfect.

Edit: So, overflow: hidden's greatness is somewhat limited.  Because of the nature of this particular site (and the fact its columns are a pain in the sinuses), I had to remove the overflow and use that sneaky, shameful little clear: both div after my sidebar, and keep the clear: both on the footer.  Plus, I had to redo the general background to fake the liquid layout laid out here by (of course!) A List Apart.

Add comment



(Will show your Gravatar icon)  









Live preview

said on May 11, 2008 (20:03)...


 

Powered by BlogEngine.NET 1.2.0.0. Original Design by Heather Alvis.
Sign in

Bellingham, Washington
Copyright © 2007 Mindfly Inc. All Rights Reserved.