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.