on Footers Attached to Bottoms
so it’s been a little while since i posted last, mostly because i’ve been busy transferring things over to my new 3.06 GHz, 24″ screen iMac (can you hear my revelry?) – a task both easy and harder than i thought. it comes with a lot of decisions for me: do i transfer everything over, or just my design tools and materials (this is a “work” purchase, after all)? do i continue using some of the hot copies of old software i have or bite the bullet and purchase latest versions? do i look for new stuff that i previously couldn’t run (i swear, i couldn’t even use dashboard on my old iBook anymore)?
previously, i was using MacJournal for updating this blog, and i really enjoyed using it. it’s really easy to use, i can keep all sort of notes in it and organize them well, and it’s so easy to publish to WordPress sites. but it’s not entirely necessary. and i did just drop a bunch of money.
i also had a bunch of fun software (like iStopMotion – a great program for doing just what the title says), but i’m hesitant to clog up my new machine. on the other hand, it’s got way more space and processing power, so maybe it’s no big deal.
anyway, i feel like i’m rambling. here’s something of more substance:
having just started working on such a huge screen, i was reminded this week of the importance of checking work on different browsers and screens. i just started work with another client where i was handed a site that was mostly completed, but in pieces. i went through and put it together and tweaked the css so that it actually worked – or so i thought.
i was using a standard centered container, with a footer attached to the bottom. i do this with the following css:
html, body{
height:100%;
}
* html #container { /* for browsers that don't recognize min-height */
height:100%;
}
#container{
min-height:100%;
margin: 0 auto;
width:980px;
position:relative;
}
#footer{
height:30px;
width:980px;
position:absolute;
bottom:0px;
}
this normally does the trick just fine with html laid out like this:
<div id="container"> <div id="footer"></div> </div>
and indeed, once i had it laid out that way, it looked great: centered content, footer attached to the bottom when the content didn’t fill the container… at least on my new large screen.
i should mention the first time i realized i had to do something to attach the footer to the bottom of my screen was when i looked at a project on a larger monitor and realized it wasn’t: on my smaller screen, it wasn’t very often that the content didn’t stretch to the bottom of the browser, so i normally didn’t notice.
turns out this goes both ways. when i emailed the site to the client, i was told that there was a problem with the content disappearing behind the footer. and it was. when i decreased the size of my browser window, everything inside the content section slid behind the footer. the problem was that the previous designer had needlessly put “float:left” on everything inside the container (except the footer), so it was floating behind the footer. but that’s not really the point.
the point is, having only viewed it on a large screen, i hadn’t even noticed something that would have been glaringly obvious on a smaller screen. so it goes both ways, and it’s still very important for me to check my work on multiple screens.
Leave a Reply