How to make divs move when browser/screen is resized
<p>I'm building a pretty basic website using a fluid design, so using percentages instead of pixel values when determining the width of the divs.</p>

<p>When I resize the browser or the screen size changes, the divs don't move, they just resize to the shape of the browser... so effectively when the browser changes size I want row1 to be at the top, then col1 on its own row, then col2 on its on row etc etc, I've exhausted most things, even trying to reverse engineer it from other peoples posts who want their divs to stay put, ny help would be great because this is super annoying :)</p>

<p><strong><em>HTML</em></strong></p>

<pre><code>    &lt;DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="layout.css"&gt;
&lt;/head&gt;

&lt;header&gt;
    &lt;div class="navbar"&gt;

    &lt;/div&gt;
&lt;/header&gt;

&lt;body&gt;
        &lt;div class="row1"&gt;

        &lt;/div&gt;
        &lt;div class="row2"&gt;
            &lt;div class="col1"&gt;

            &lt;/div&gt;

            &lt;div class="col2"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row3"&gt;
            &lt;div class="col2"&gt;

            &lt;/div&gt;

            &lt;div class="col1"&gt;

            &lt;/div&gt;
        &lt;/div&gt;  
&lt;/body&gt;


&lt;footer&gt;

&lt;/footer&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>    * {
    margin:0;
    padding:0;
}

.navbar {
    position:fixed;
    width:100%;
    height:75px;
    background-color: #c0f4de;
    top:0;
    left:0;
    right:0;
}

.row1 {
    margin-top:75px auto;
    background-color: #c0f4de;
    width:100%;
    height:500px;
}

.row2 {
    width:100%;
    height:500px;
}

.col1{
    width:50%;
    height:500px;
    background-color: #ffffff;
    float:left;
}

.col2 {
    width:50%;
    height:500px;
    background-color: #eeeeee;
    float: left;
}
</code></pre>