Challenge: old 2 column layout still unbeaten by CSS
 

Hi all,

I've been trying hard but I can't figure out this one:

I have two pieces of HTML content inside a container DIV: the first block is short, the second one is LONG.
They must stay up as two columns (the long block can't wrap under the short one), but NO assumptions on contents of block #1 or #2 can be made: no width values can be chosen.

The intended layout is something like:


┌───────────────────────────┐
│ External container        │
│ ┌───────┐┌──────────────┐ │
│ │Block 1││ Block 2      │ │
│ └───────┘│ Both widths  │ │
│          │ are UNKNOWN  │ │
│          └──────────────┘ │
└───────────────────────────┘



i.e. I want to reuse this code in a variety of situations (where I can't foresee how much content will be on either one but they still must fit two columns) so I can't use a silly solution like 'set margin of block X to be wider than block Y and make it float'. Remember: we have NO IDEA of what block 1 or 2 width may be set to.

Any ideas?

TIA,
Hataru Mendo

If you cannot apply a width then it's practically impossible since it's imperative that a div use a width even if inherited or as a percentage.