I spend a few hours recreating the main mageprojects.com site in pure css. The result is visible here: http://mageprojects.com/PureCSS/ and works in Firefox 3.6, Chrome 4 and Safari 4.

Note that there is actually just one image on that entire page and that’s the header image with my logo in it. Everything else you see on that page is done with css only! I even had some css animation effects in it but since that’s chrome only i left it out for now.

Just made it to show you the power of CSS.

Feel free to browse the page source and use it to your liking.

Mark.

First: What is the biggest problem in html/css that we currently have?

Well, let one div be equal in height as some other div. When the height positions are absolute that isn’t an issue. When both can vary, lets say a menu and a content div, then it becomes a big nightmare for web developers. There are a lot of ways to solve that issue. Some say faux columns, some say tables and others use javascript grid library’s. All those solutions will just work fine but won’t fix the issue. The issue is ilustrated in the image below.

The image above is exactly what is possible today with divs. The menu div (in this case) can’t auto adjust to the height of the content div.

And this is what we want:

Note: the vertical text says:

div#menu
{
    .....
    stretch-with: “div#content”, height;
    .....
}

Now my proposal would be to add a “stretch-with” property in css which allows you to say:
“this div (menu) should be equal in height as that (content) div”.

The properties within stretch-with would be: [element name] [how to stretch] [how much of it]
So that would result in: stretch-with: “div#content”, height, 100%;
Perhaps also a pixel value instead of percentages… not sure if that adds value to this idea?

I would say that 100% is default so no need to supply that so you get: stretch-with: “div#content”, height;
In normal text this would say: stretch this element to the same height as div#content.

Now how is this different from the “Advanced Layout Module” that is a working draft over at W3C?
Well they use ASCII to define the entire layout in css. That might be a little overkill and not even what you want. I certainly don’t want to specify my entire layout in ascii art. All you want in pritty much any case is to have some div be as high as another div. This proposal does just that and nothing more. Also this idea might be a lot easier for rendering engines to pick up because it’s a lot more simple then the Advanced Layout Module and it’s not making css much harder to understand or even make artwork from it.

Now all that needs to happen is the top rendering engines to implement this idea. Those are:
Trident (internet Explorer)
Gecko (Firefox) + a lot more gacko based browsers
Webkit (Safari) + a lot more webkit based browsers
Presto (Opera)

Making a Javascript implementation for this (just to test how it works) is probably extremely easy as well because it’s just not much to implement and not extremely complex.

Let me know what you think of this idea,
Mark.

Update: It’s “Template Layout Module” instead of “Advanced Layout Module”. Sorry for the confusion it might have caused. Not changing in the text above since i submitted it to a few places.