MikePadgett.com

This item is now out of date. See the updated version.

I recently discovered a CSS hack that has come in very handy indeed since.

The problem arises in both Firefox and IE (though the solution is different for each) when we try to wrap a div around one or more divs with float.

You want your wrapper to stretch vertically with your contained divs, but instead, you find that your wrapper gets behind when your floated content divs go stretching off down the viewport and beyond.

The development community is all but silent on this issue, though I would think it’s a common enough problem to have encountered.

I tried and tested an IE solution, but it was thanks to Big John and Holly at positioniseverything that the NS / Firefox side of things could be cleared up. The full article with the whys and wherefores is here, and the code we need is as follows:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


Now we get the result we want!

Little by little, I’m being dragged into the 21st century (no coincidence that my boss’ name is Little) of CSS.

Bronwen Hodgkinson’s beautiful “Kelmscott” design at csszengarden.com

I’ve been doing CSS layouts for a while now, but on densely packed eCommerce sites, it’s never easy, particularly when you’re up against an audience used to three column layouts with header and footer.

Now it’s not the three columns or the header that are the problem of course. It’s the footer. Back in the day (only a few months ago for me in the build now care later world of digital agencies) we used to employ the DOMbuster 100% height table, which with a bit of tweaking you could even get working nicely on NN / Mozilla browsers.

In terms of annoyance, getting the CSS footer to sit at the bottom on shorter content pages without being broken by the column height spill (content frequently goes right under the footer and beyond!)ranks up there withmanaging form elements when they overlap with show/hide divs such as popup menus.

There are lots of possible solutions suggested. Some even work, butfew stand up to the constraints you start to add when adapting them.

Suzy Campbell writes that she won’t bedevelopingher three columnsolution any further as she thinks that CSS offers us other far more interesting opportunities outside of the (tabular) precedents we have.

I wholeheartedly agree. Why are we bothering totry tofind old solutions to new problems? Even a cursory look around shows us new ideas that focus on design rather than hacking (as it should be) and all with the cleanest semantic markup.

The code can be as beautiful as the design. All we need is for some of the browsers to catch up and make good design matter most.

Indeed.

In my current efforts to adhere to div-only layouts, it was expected that I would eventually get to a sticky point.

I’m not used to hacking CSS, so progress for me has been slow. Hacking CSS is something of an unnatural process, particularly when you feel most comfortable you’re coding pages fluently from a design.

Of course, it’s not the CSS that’s the problem, it’s the browsers. Or perhaps I should say, the browser. For as Dunstan shows, curved corners are not especially difficult with selectors. It’s good old Internet Explorer that has the issues.

The Microsoft response is particularly horrid, manifested in an abhorrence of nested divs. As someone later pointed out, the whole point of good CSS is that unnecessary markup is removed.

“The drawback to this solution,” owns MS’ Markus Mielke, “is that the code can be difficult to read, and you can end up with convoluted HTML that’s hard to maintain. The DIVs really have no reason to be in the code other than to provide insertion points for each corner, since you can’t put all the images in one DIV.” But that’s his solution, over and above which he suggests we try Google. Great.

If you can get past the invective that was hurled at this by way of response, you certainly find some alternatives that do cater for IE in this particularly thorny area. Though it contains some javascript workings, Alessandro Fulciniti’s “Nifty Corners” solution is one of the tidiest, with Roger Johansson’s cross-browser and transparency effort one of the cleverest.

Finally, a good little tool to help overcome the alien div-only methodology are fu2k.org’s layout test pages- very handy for figuring out the whats and the whys!