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: 
Yep, you're going to want to use media queries. Here's a [JSFiddle](http://jsfiddle.net/UeZZf/1/) of it in action.

Resize the display iFrame of the Fiddle back and forth past 500px width to view the results. I spruced up your HTML a little, too, to make it more modern (sorry):

HTML:

```
<section class='contentWrap'>
    <aside>
        This element corresponds to the element on the far left of the image you linked to.
    </aside>

    <div class='mainContent'>
        <article class='left'>
            This element corresponds to the mid-left element in the image you linked to.
        </article>
        <article class='right'>
            This element corresponds to the mid-right element in the image you linked to.
        </article>
    </div>

    <nav>
        This element corresponds to the element on the far right side of the image you   linked to.
    </nav>

</section>

```

CSS:

```
.contentWrap {
    width: 100%;
}

.contentWrap aside {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid purple;
}

.mainContent {
    display: inline-block;
    width: 45%; /* only because the borders are upsetting the percantages */
    height: 200px;
    border: 1px solid gray;
    vertical-align: top;
}

.mainContent article {
    border: 1px solid #00cae9;
    margin-bottom: 2px;
}

.contentWrap nav {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid orangered;
    vertical-align: top;
}

@media screen and (min-width: 500px) {
    .contentWrap {
        width: 500px;
        margin: 0 auto;
    }

    .mainContent article {
        display: inline-block;
        width: 47%;
        vertical-align: top;
    }
}

```

NB: if you're viewing it on a super small screen, it won't work; that's JSFiddle's problem.
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.