CSS3 Proposal - Width/Height % Behavior Change

Under current CSS rules, specifying width or height (or their respective min-'s) by percentage is relatively easy, yet it's unnecessarily limited. I say this because when you specify a width using a percentage, you only have control over one of the three things you are specifying.

Example:

<div id="container">
    <div id="content">
        Content
    </div>
</div>

#container
{
    width:500px;
    height:200px;
}
#content
{
    width:100%;
    height:100px;
}

Content is inside Container, and Container is Content's parent. Content has a width of 100%. What exactly does that mean though? It means that Content's width should be equal to 100% of it's parent's width. That is three separate values, but under current CSS rules, we only can change the first. The second is locked into Parent, and the third is locked into being the same as the value being specified.

Imagine for a moment if the user wanted to make a flexible grid of squares, for a mobile phone. A container, set to 100% width of the screen, and then inside of it, three squares, each 28%, with margin-left of 4%.

<div id="container">
    <div id="content">Content</div>
    <div id="content">Content</div>
    <div id="content">Content</div>
</div>

#container
{
    width:400px;
    height:200px;
}
#content
{
    width:28%;
    height:28%;
    margin-left:4%;
    float:left;
}

Square

Square

Square

Height and width are both set to 28%. But the panels aren't square. This is because you want both width and height to be 28% of the parent's width, and right now height is set to 28% of the parent's height. Looking around, there is no way to change this as of now, so here is my proposal.

Height: valueof location value

Ex: Height: 28% auto width;

The first of the three values would be exactly the same as it is now, a percent.

The second would be location. It could be any class or id, or auto, which would revert to the parent container. Additionally leaving it blank would revert to auto, to parent container.

The third value would be what value to grab from the location. Currently, by default it is set by the value that you are changing. Width = width, height = height. But you'd be able to put in any other number based css value instead.

An added benefit is full backwards compatibility. Old browsers would ignore the second two values, and browsers that support the new rule will set any blanks to auto, so all old code will function exactly as it does today.

I'm not sure how one goes about submitting a new rule proposal to be added to CSS, so if anyone knows, please comment and let me know. Also, if you have concerns or suggestions about the proposal, please let me know as well.