Kilian Valkhof

Random CSS Thought: Solving equal height columns

Equal Height columns have been (one of) the holy grail(‘s) of webdevelopment for quite some time. Making columns look balanced can be a struggle sometimes. There is of course the repeat-y background property, but it doesn’t allow for equal height columns with variable width.

Disclaimer: This is an article about a fictional, would-be-nice possibility in CSS.

The problem #

The problem with CSS here, is that there is no way to make properties dependent on each other. Something that is fairly easy in any programming language (CSS is a markup language). In CSS, you cannot tell an element to be the same height as another element. (Unless, of course, you know that the other element has , and always will have, a fixed height. But then the whole point is moot.)

So… #

It would be nice to have a way to tell an element to have one of it’s properties the same as another element. This great addition to CSS would slightly blur the line between it being a markup language and a programming language, but not so much that it would become too hard to work with:

#column1 {
	float:left;
	width:30%;
	height:auto;
	background:url("column1.png") repeat 0 0;
}
#column2 {
	float:right;
	width:20%;
	height: #column1.height;
	background:url("column2.png") repeat 0 0;
}

You have to admit that looks mighty simple, doesn’t it? The element.property is a fairly normal way of declaring properties in programming languages, and it serves it’s purpose nicely here.

Another example, now using text-colour:

#content {
	color:#222;
	background:#eee;
}

blockquote { /* Assuming you'd go for an inverted look */
	color: #content.background;
	background: #content.color;
}

Now whenever you decide to change your #content colours, the blockquotes change accordingly.

Other implications #

Of course, something like this would highly impact CSS as a language. For instance, it would make the use of PHP to add dynamics obsolete. Instead of using a PHP parser to add the right CSS in the right places, just place a #standard element on top of your CSS, and reference it in the rest of your CSS.

CSS development would become much easier with this rather simple addition.

Bonus: Mix ‘n’ Match #

When you combine this with another one of my Random CSS Thoughts: Math in CSS, things get really interesting:

#column2 {
	height: #column1.height + 10px;
}

This would open a world to all sorts of CSS effects that now require a whole mess of additional elements.

Discussion #

Do you think that CSS as a language is ready for such an addition? Would it make your life as a CSS developer easier? Please share your thoughts in the comments.