Actually, HTML 5 does seem pretty cool...

You can already do that, all browsers support some type of vectors, IE uses VML instead of SVG. See Raphaël (http://raphaeljs.com/) which is a Javascript library for vectors.

HTML5 is a lot about establishing standards for things that already exist , instead of allowing new functions, a lot of it is about going against Microsoft--there was a whole controversy about OGG being recommended as the video format.

SVG in HTML would be cool if it were integrated with CSS and you could do things like wrap the text of a div to a certain shape defined by SVG ( <div style="shape:url(egg.svg)" />. As far as I know, HTML5 is introducing nothing new like that.

[edit] Sorry I posted an incorrect solution but I've figured this out before so I'm going to try to see if I can come up with it again

Anyway I'm not sure what I was thinking of when I wrote up that solution... but you can hack anything you want regarding positioning in CSS, it will just be inelegant.

For example, to achieve what we're talking about without styling it as a table, you could do this:

<div style="position:relative;"> 
    <div style="position:absolute; left:0px; top:0px; height:100%;
        width:50%; background:coral;"></div>
    <div style="position:absolute; left:50%; top:0px; height:100%;
        width:50%; background:skyblue;"></div>
    <div style="float:left; position:relative; width:50%;">hello</div>
    <div style="float:left; position:relative; width:50%;">hello<br/>goodbye</div>
    <div style="clear:both;"></div>
</div>

The relative elements are determining the size of the parent element, while the absolute elements fit to the size of the parent element (for background colors).

What CSS should do, is that if you set 'height:auto;' to a parent element, and 'height:100%;' to child elements, is do what we're saying automatically. But there's no difference in CSS between height:auto; and leaving the height value empty, so it doesn't work that way.

Harlequin--- 

You can do what you want with stacking

<div style="height:200px;">
    <div style="height:100%; background:coral;">robot</div>
    <div style="height:50px; background:green;">robot</div>
    <div style="height:100%; background:gold;">robot</div>
</div>

But there are a lot of bugs with it, and you're right generally that there are problems with vertical alignment. These aren't things to be fixed in HTML though but in CSS.

Sorry, I forgot all about the height:100% problem in CSS, so thats wrong, but you can hack it like this:

<div style="height:100%; overflow:hidden;">
    <div style="height:50%; top:-25px;">
        <div style="height:100%; background:coral;">test</div>
        <div style="height:50px; background:gold;">test</div>
        <div style="height:100%; background:coral;">test</div>
    </div>
</div>

Where a parent element has a hidden overflow and then a child element has a top thats half the height of the element with set height and is half the height of the parent element

Yes , you just have to do more work to get it to work the way you want to use all three divs for content. The top div should have a top padding of 25px and the bottom a bottom padding of 25px (or have empty 25px spacer divs if you want those two to have borders). [edit: no, you need to do the spacer divs, the padding messes up the layout]

Then you need to set overflow to hidden on all of the visible divs. Which isn't a problem considering if you wanted those divs to be those sizes.

Now are you asking about having the center div automatically change its size to its content and still stay centered to the page? I'll have to look at that.

edit -- oh wait are you talking about the text affecting the sizes of the sections? actually I forgot you have to do some absolute/relative positioning to get the centering working right. I edited that out before I pasted the code in here.

you have to do something like this

<div style="height:100%; float:left; width:100%; overflow:hidden; position:relative; ">
    <div style="height:50%; width:100%; position:absolute; top:-25px;">
        <div style="height:100%; background:coral;">test</div>
        <div style="height:50px; background:gold;">test</div>
        <div style="height:100%; background:coral;">test</div>
    </div>
</div>

Either that or use top-margin instead of top

<div style="height:100%; float:left; overflow:hidden; ">
    <div style="height:50%; margin-top:-25px;">
        <div style="height:100%; background:coral;">test</div>
        <div style="height:50px; background:gold;">test</div>
        <div style="height:100%; background:coral;">test</div>
    </div>
</div>

a negative top works for position:absolute; for position:relative you need a negative top-margin

This will vertically align a single box, regardless of size in a modern browser which support inline-block (I think its all of them now)

<div style="height:100%; float:left; overflow:hidden;
    width:50px;">
    <div style="display:inline-block;height:100%; width:0px; vertical-align:middle;">
    </div>
    <div style="display:inline-block; width:40px; background:coral;
    vertical-align:middle;">test one, two, three, four;</div>
</div>

Get rid of the whitespace to make the width 100%; if theres any whitespace that counts as a space character with inline-block

<div style="height:100%; float:left; overflow:hidden;
    width:50px;">
    <div style="display:inline-block;height:100%; width:0px;
    vertical-align:middle;"></div><div style="display:inline-block; background:coral;
    vertical-align:middle;">test one, two, three, four;</div>
</div>

I got something pretty close:

One minor issue: when the browser height is less than the height of the text, the bottom border on the top block will disappear.

<div style="height:100%;">
<div style="height:50%; background:gold;  width:48px; position:relative;
    border:1px solid green; overflow:hidden;">
    <div style="overflow:hidden; position:absolute;  height:100%;">
        <div style="display:inline-block;height:100%; width:0px;
        vertical-align:bottom;"></div><div style="display:inline-block;
        background:coral;
        vertical-align:bottom; position:relative;">
            test one, two, three, four;
            <div style="position:absolute; top:0px; border-bottom:1px solid green;
            margin-top:-2px;
            background:gold; width:100%; height:50%;"></div>
            </div>
    </div>
    <div style="position:absolute;">
    block 1
    </div>
</div>
<div style="height:50%;  background:skyblue; width:48px; border:1px solid green;
    overflow:hidden;">
    <div style="background:coral; position:relative;">
        test one, two, three, four;
        <div style="position:absolute; border-top:1px solid green; top:50%;
        margin-top:-3px;
        background:skyblue; width:100%; height:100%;">
        block 3
        </div>
    </div>
</div>
</div>
<div style="height:100%; overflow:hidden; position:absolute; top:0px;
    width:50px;">
    <div style="display:inline-block;height:100%; width:0px;
    vertical-align:middle;"></div><div style="display:inline-block; width:50px;
    background:coral;
    vertical-align:middle;">test one, two, three, four;</div>
</div>

Which can be fixed, by putting the border on the middle block instead of on the top block.

And this works perfectly:

<div style="height:100%;">
<div style="height:50%; background:gold;  width:48px; position:relative;
    border:1px solid green; overflow:hidden;">
    <div style="overflow:hidden; position:absolute;  height:100%;">
        <div style="display:inline-block;height:100%; width:0px;
        vertical-align:bottom;"></div><div style="display:inline-block;
        background:coral; width:100%;
        vertical-align:bottom; position:relative;">
            test one, two, three, four;
            <div style="position:absolute; top:0px; 
            margin-top:-2px;
            background:gold; width:100%; height:50%;"></div>
            </div>
    </div>
    <div style="position:absolute;">
    block 1
    </div>
</div>
<div style="height:50%;  background:skyblue; width:48px; border:1px solid green;
    overflow:hidden;">
    <div style="background:coral; position:relative; width:100%;">
        test one, two, three, four;
        <div style="position:absolute; top:50%;
        margin-top:-3px; left:0px;
        background:skyblue; width:100%; height:100%;">
        block 3
        </div>
    </div>
</div>
</div>
<div style="height:100%; overflow:hidden; position:absolute; top:0px;
    width:50px;">
    <div style="display:inline-block;height:100%; width:0px;
    vertical-align:middle;"></div><div style="display:inline-block; width:50px;
    background:coral; border-top:1px solid green; border-bottom:1px solid green; 
    vertical-align:middle;">test one, two, three, four;</div>
</div>

The bottom border for the top block and the top border for the bottom block are just on the middle block. Borders on the middle block can be inserted inline.

It has some problems in Opera and IE. Opera seems not to want to vertically align anything against a div that has a width of 0px. That can be solved by making the container pixel larger for a 1px div, and then having a negative margin-left in a container with overflow:hidden.

I'm not sure whats wrong in IE yet. It works in Safari and FF. I'm actually interested in getting it working so I'll play around with it.

edit --IE isn't doing the inline-block correctly. which i don't understand, since its been in IE since at least IE6.

Also across browsers, its not aligned correctly because the borders are giving the 50% divs extra padding that adds up to more than 100% of the height. That can be fixed by putting the borders in an interior div.

I know there's problems -- I was just demonstrating my theory that you could 'technically' do any positioning in css with a lot of work -- but the fixes can be in css, not html. All you have to do is have something equivalent to the * value in WPF.

<div>
    <div style="height:*"/>
    <div style="height:auto"/>
</div>

That would be a grid.