Difficult page make-up with centered elastic blocks

Answer 1

Something like this works in IE 7 & FF 3 for me:

<div style="width: 49%; min-width: 300px; float: left; background: red;">Test</div>
<div style="width: 50%; min-width: 300px; float: left; background: blue">Test</div>

Problem is it won't center align when shrunk, and IE 6 hates min-width.

Still looking into center align...

Firefox only:

<div style="text-align: center">
  <div style="display: inline-block; width: 49%; min-width: 300px; margin: 0 auto; background: red;">Test</div>
  <div style="display: inline-block; width: 50%; min-width: 300px; margin: 0 auto; background: blue;">Test</div>
</div>

Answer 2

If i understand your question correctly, you want the outter box to never become so narrow, that the two inside are positioned over one another?

Put minimum-width on the outter box as well, that equals the summed up min-width, padding, margin and borders of the two inner ones. You can pretend to have min-width in IE6 as well, in this way:

min-width: 200px;
width: auto!important;
width: 200px; /* The last one will be used by IE6 (as min-width), the !important one by standards compliant browsers */

Should also work with min-height.