Question: I've been trying to achieve this for hours and I'm not quite getting it to work, so here it goes nothing:

I have this site:[Site HomePage](http://i.stack.imgur.com/sH5g3.jpg)

composed by this HTML elements:

```
    <div id="headerwrap">
        <div id="header">
        </div>
    </div>

    <div id="navigationwrap">
        <div id="navigation">
        </div>
    </div>

    <div id="midcontentwrap">
        <div id="leftwrap">
            <div id="left">

            </div>
        </div>

        <div id="midwrap">
            <div id="midleft">

            </div>
            <div id="midright">

            </div>
        </div>

        <div id="rightwrap">
            <div id="right">

            </div>
        </div>

    </div>
</div>

```

What I need is: 
- When the browser window is resized, either **left** and **right columns** stay where they are and the **MID COLUMN RIGHT SIDE** needs to go below **MID COLUMN LEFT SIDE**.
My CSS file is pretty simple by now and this is the only major thing I need to do as the window size changes.

Thanks in advance for any help.

Answer: 
Oh fun, an excuse to have a play with **[CSS Media Queries](http://css-tricks.com/css-media-queries/)**!

**DEMO: <http://jsfiddle.net/Vn2QY/1/>**

CSS
---

```
#midcontentwrap {
    min-width: 500px;
}

#leftwrap, #midwrap, #rightwrap {
    float: left;
    min-height: 400px;
}

#leftwrap, #rightwrap {
    min-width: 100px;
    width: 25%;
    background-color: #15a;
}

#midwrap {
    width: 50%;
    background-color: #45a
}

#midleft, #midright {
    width: 50%;
    float: left;
}

#midleft {
    background-color: #a45;
}
#midright {
    background-color: #4a5;
}

@media all and (max-width: 500px) {
    #midleft, #midright {
        width: 100%;
    }
}

```

The key piece here is the final part of the CSS. It basically states that "for all media (screen, printing, etc) when the browser width is less than 500 pixels in width, change the styling for `#midleft` and `#midright` and make them 100% of the available width."

By increasing their widths their existing `float` styling will force them on to new lines.
> 
> To solve this problem....use `%` value for all `div id` width
> 
> 
>