smart page resizing

Question

Suppose I have an HTML page with three blocks of fixed width (their height can vary if that's important), like shown on picture:

I would like to make it behave as shown on next picture: when browser screen width is reduced so it can't fit all three blocks in one line, first block goes down.

Is it possible to achieve such behavior? Preferably with CSS only but any working solution would be great.

Answer 1

Use divs with float:left and fixed width values

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

like so... I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..

Answer 2

Put all these three blocks inside a div and set it's width to 100%, when the screen will resize the blocks will be arranged automatically.

Answer 3

It's virtually impossible to let the first block drop down without any Javascript trickery. Making the right-most one drop with float: left is easy on the other hand.

Answer 4

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>

Answer 5

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

This one works. You put block 1 as the last one and only make that one float left.