Align bottom in float-based CSS column design
Turning mockups into actual HTML+CSS templates is a challenging task. But being free to markup things as one needs makes it a lot less daunting. (Hear: styling ID-less and class-less table layouts is just impossible, a task my friend Yvan was recently faced with).
The other day at work I had the graphic designer give a look at how I'd managed, and give me feedback. Of course, he quickly spotted a block of text that should be bottom-aligned in the sidebar. I had not yet found how to do that since this template is to be used by a CMS and both content and sidebar size are unpredictable. But after a couple hours of tweaking here and there, and some IE bug-squashing, the solution was finally there: absolute bottom outside the float.
The initial markup was as follows:<div id="content">
<div id="sidebar">
<div id="nav">
Navigation UL
</div>
<div id="contact">
Contact info
</div>
</div>
<div id="main">
Body text
</div>
</div>
The sidebar and main content are floated side by side, and div id="main" uses Dan's Fauxcolumns technique. I tried several solutions (including display : table-cell) but to no avail: being floated, there was no way to determine the height of sidebar or content. Indeed, the only one that knew the full height was... That's right, <div id="main">. Getting my markup in more meaningfull order was easy, and using position : absolute; bottom : 0; on the Contact info container block solved my problem. The updated markup goes like:<div id="content">
<div id="sidebar">
<div id="nav">
Navigation UL
</div>
</div>
<div id="main">
Body text
</div>
<div id="contact">
Contact info
</div>
</div>
To avoid the Navigation UL and Contact info overlapping each other, the main problem using position absolute and unkown block length, I set a large padding on my Navigation UL that should accomodate normal Contact info block length.
Then I turned to IE and, Woah! Where's my Navigation, and my content? All gone... I didn't immediately recognise Peek-a-boo since there was no live hiding and showing of content, but the situation proved to be close enough. Adding hasLayout onto my main container solved my problem in no time and I can only recommend turning to Position Is Everything when something CSS goes wrong.
The rule that made the difference uses the Holly hack and works fine in IE/win version 4 to 7. I haven't had the time to test this in IE/Mac however, but since Peek-a-boo isn't supposed to happen on this one, things should be all clear in this direction.
Here is the CSS for the above 2-columns floating divs with bottom-aligned Contact block:#content {background : #FFF url(fauxcolumn.gif) repeat-y;}
* html #content {height : 0.01%;} /* Holly Hack to trigger hasLayout in IE/Win */
#side {float : left;}
#main {float : right;}
No comments yet