arkitrave :: log

I’m enjoying the irony of this, two years after embracing web standards and abandoning table-based layout. I just used a transparent .gif image to get a site’s layout to work. Now, before you start composing the hate mail, let me explain.

I’m working on a set of templates for a web app. The content, of course, is user-determined, and can’t be allowed to break the layout. There is a sidebar, which may or may not be present, and I set up the divs to float to allow a footer to be positioned properly. A perfectly good way to do things, unless of course there is not content in the sidebar. Then, most browsers collapse the sidebar to nothing, and the float moves the main content div over to the left, which was unacceptable in this situation.

This doesn’t work. The following is what we actually want:

So, what’s the solution? The easiest one is min-height. Applying a height to the sidebar div will get browsers to render its entire width instead of collapsing it. That works in Mozilla browsers, and the new Safari which supports min-height.

min-height: 10px;

IE doesn’t support min-height, so it will collapse the div. This is easily fixed with the asterisk hack:

*height: 10px;

IE treats height as if it were min-height, so applying this selector won’t prevent the sidebar from growing with content. It will, however, ensure that there’s always some height on this box and keep the div from collapsing.

This is all great, but the web app is designed to be used on the Mac platform, and all versions of Safari should render the page correctly.

Since old Safari doesn’t render min-height, and isn’t going to fall for the IE * hack, what about generated content, which Safari can do?

Of course, we can’t put a character in the div, because it will render and be seen. And, putting ” ” in the content won’t work either; Safari still collapses the div. However, an image can be generated and placed into this div using CSS, and if it’s a 1px by 1px transparent image, nobody will be the wiser.

#div-in-question:after {
   content: url("clear.gif");
   }

So, there you have it. We’ve come full circle, and a transparent gif image helps a very nice, compliant browser to render a very nice, compliant layout. It shouldn’t affect anything else, because anything inside that div is a child, and will render right over the image, which is transparent anyway. In a year, when nobody’s using old Safari, it can come out of the CSS.