Proper way to stretch elements?

Question

Currently I have: http://jsfiddle.net/walkerneo/JnEpS/3/

Assuming I want the following:

• Gray boxes change height on resize, but constant width
• Blue box changes height and width on resize
• Cyan box changes width but not height on resize

What is the proper way to do it?

The way in the jsfiddle is done by stretching the element by setting its position to absolute and making its left, right, top, and bottom to 0px. I'm loving how easy this is compared to using table display properties or lengthy code, but I get the feeling it's something that shouldn't be done.

Is this proper code? If not, what is?

Answer 1

That is the "proper" way to do it. I can't think of any other way to go about it that doesn't involve tables that might not even work.