Question

I have 3 blocks: one wrapper and 2 other inside the wrapper. Inside-blocks have same size.

Wrapper is elastic and its width is being changed during window resizing. 2 blocks inside wrapper are elastic too. Each of these 2 inside blocks has min-width property.

When wrapper is wide enough inside blocks are positioned in one line one after another. But when wrapper becomes too narrow blocks are positioned in 2 lines.

The final aim you can see on the picture below:

alt text http://img155.imageshack.us/img155/9006/nessview.png

Important moment: as you can see on the third block, when blocks are positioned in 2 lines they are alined at center.

Question: is it possible to do this make-up using just html and css?

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>