Flexible, Grid-Like Layouts in CSS

nospam@example.com (Ken Snyder) — Tue, 17 Jun 2008 11:12:11 -0600

Update: I've made some comments on cssnewbie.com talking about how this technique is useful for magazine-type layouts and is actually more semantic in that case.

I haven't yet wrapped my head around it, but Eric Sol has posted a wonderful A List Apart article about achieving flexible, grid-like layouts in CSS.

Just when you assumed that everything that could be done in CSS has already been done, the geniuses at A List Apart have really come up with a potentially revolutionary technique.

Example of Faux Absolute Positioning in action. (by Eric Sol, A List Apart)

The basic idea is to use position: relative; left: 100%; margin-left: -##% (non-percent units such as px also work). Eric calls the technique "Faux Absolute Positioning". The items generally have the same behavior as inline elements and avoid some of the fragility of floats. Eric explains the inspiration for the technique:

Our use case was even more complex: my team was developing a web-based WYSIWYG form generator that allows the user to drag items to arbitrary locations on a canvas. We needed to let our users create beautiful forms that didn’t use overly static layouts and to let them align columns as needed.
For example, let’s assume we want a form that puts the postal code and city fields on the same line because they are semantically connected. To accomplish this, we tried using floated positioning inspired by the Holy Grail technique. Using this method, we needed to adjust the width, borders, margins, and/or padding of the postal code field to pin the city field to a fixed horizontal position. That was a problem because if the width of the postal code field needed adjusting, or if we wanted to adjust the amount of whitespace between fields, the city field would need to move as well. The more elements on a page—the more cells in your grid—the more tedious this kind of adjustment becomes. Additionally, the positioning is sensitive to the slightest change in a number of parameters, which makes it nigh impossible to control in case of dynamic form items.
Next, we tried using absolute positioning. This gave us much more control over the positioning of the items and is robust. But absolutely positioned elements have no height, and that caused the containing element (the canvas) to collapse. This made it hard to position content without making everything absolutely positioned—which is impossible to achieve with dynamic content.

Forget IE

nospam@example.com (Ken Snyder) — Fri, 06 Jun 2008 22:11:00 -0600

IE6 is the biggest headache. And IE7 isn't much better. I'm not holding my breath for IE8 especially with its dismal performance in the Acid 3 test. I love the humorous pie chart that reports that over half of a web developer's time is spent catering to IE, swearing at Bill Gates and swearing in general. It is so true.

I'd like to move on past IE's limitations. I'd like to be able to do more CSS2, stop worrying about the broken box model, and throw away my CSS hacks cheatsheet. That is the vision of Dean Edwards in his IE7.js and IE8.js libraries. Dean Edwards is a pioneer of JavaScript techniques and a true authority in the JavaScript world. His perspectives are sometimes controversial, but no one disputes that Dean Edwards writes some elegant and speedy code.

His popular open-source contributions include Packer, a JavaScript compressor/obfuscator, cssQuery, a fast css selector engine, and base2, an object oriented JavaScript framework.

But I'd like to talk about my experience with his lesser-know library IE7. From what I understand, it was named IE7 with the assumption that IE7 would correct all the problems the script fixed. After all, he had made the fixes in JavaScript in a matter of months so surely the IE development team could make the fixes given 5 years and access to the source code. Unfortunatly Microsoft blew it and Dean recently released IE8. He considered other names like "IENext" but decided to follow convention.

Anyway, the following is a list of advanced selectors and features that I find so nice to use--and with IE8.js, I CAN!

Apply styles by attribute:
input[type=text], input[type=submit], input[type=password], etc.
Add a focus effect:
input[type=text]:focus, textarea:focus, etc.
Add a hover to any element:
input[type=button]:hover, li:hover, tr:hover, etc.
Apply styles to disabled elements:
input[type=submit][disabled], input[type=text][disabled], etc.
Styling by sibling selectors:
h1 + *, p + table, p + ul, etc.
Immediate descendents:
#content > *, #nav ul > li, etc.
Specifying opacity in one line:
opacity: 0.66
Define minimum and maximum widths and heights:
min-height: 50px; max-height: 100px; min-width: 200px; max-width: 500px; etc.
Before and after pseudo-selectors:
q:before, blockquote:before { content: "“" }, etc.
Transparent PNG backgrounds:
.print_icon { background: transparent url(../images/printer.icon.png) no-repeat 0 0; }
Ignore the broken box model: (use width + padding or height + padding)
#content { padding: 10px; width: 400px; height: 400px; }

Limitations include the fact that selects are still stupid, inputs still cannot be transparent, and PNG background images cannot be positioned or tiled.

Although IE8.js isn't perfect, download it and see what you are missing!

Ken Snyder - CSS

Flexible, Grid-Like Layouts in CSS

Forget IE