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: 
[Try this DEMO](http://jsfiddle.net/Godinall/qMZMT/1/)

I'm guessing your want to get a fluid/responsive design. This should work for you.

Use `float:left and min-width`
> 
> To solve this problem....use `%` value for all `div id` width
> 
> 
>