Div Resize when Window Resize

Question

Hello friends I am coming here with a confusion I found a web page which coniatins two container one is left side and second is right side when I reduse the width of the browser after one limiit the right side div moved beneth left side div its very strange for me i saw this first time i trying to figure out how did they do that but faild to get the same result . Just go through the link http://jquerymobile.com/demos/1.2.0-pre/

I hope you guys understand what I am trying to explain. Just open link and reduce the width of the browsers after on limit you can see what i am talking about

Please share your Views

Thanks in advance ......

Answer 1

They used CSS media queries.

http://jsfiddle.net/xPMqm/1/

HTML:

<div id="chameleon"></div>​

CSS:

#chameleon{
    width:100px;
    height:100px;
    background-color:yellow;
}

@media all and (min-width:600px) {
    #chameleon{
        background-color: blue;
        height: 200px;
    }
}

@media all and (min-width:800px) {
    #chameleon{
        background-color: green;
        height:300px;
    }
}

@media all and (min-width:1000px) {
    #chameleon{
        background-color: orange;
        height: 400px;
    }
}


​