title: Responsive CSS: divs not responding on alternate resolution
body: <p>Everything is working perfectly except when the browser/viewport contracts to 1280px the 3 divs in the body all break. When the browser contracts, I only want the #related div to break and the other 2 divs (#main, #images) to float side by side with #images stretching to fill the screen. If you add a fixed width to #images div on the contracted CSS, everything stacks perfectly, but I don't want the #images div to have a fixed width, I want it to stretch out to fill the screen.</p>
  
  <p>Thoughts?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="viewport" content="width=device-width, intial-scale=1.0" /&gt;
      &lt;style type="text/css"&gt;
          body {
              margin:0;
              padding:0;
              }
          header nav {
              float:left;
              }
          header nav ul {
              margin:0;
              padding:0px;
              }
          #menu1 li {
              list-style-type:none;
              float:left;
              margin:0;
              width:200px;
              height:50px;
              background:orange;
              margin-right:1px;
              }
          #bodywrapper {
              clear:both;
              float:left;
              position:relative;
              }
          #images {
              position:relative;
              margin:0 300px 0 600px;
              background:cyan;
              }
          #main {
              position:absolute;
              top:0;
              left:0;
              width:600px;
              background:lime;
              }
          #related {
              position:absolute;
              top:0;
              right:0;
              width:300px;
              background:red;
              }
          #wrapper {
              width:100%;
              height:auto;
              margin:0;
              padding:0;
              }
  
          @media screen and (max-width: 1280px){
              #bodywrapper {
                  clear:both;
                  float:left;
                  position:relative;
                  }
              #images {
                  float:left;
                  position:relative;
                  margin:0;
                  background:cyan;
                  }
              #main {
                  float:left;
                  position:relative;
                  margin:0;
                  width:600px;
                  background:lime;
                  }
              #related {
                  clear:both;
                  float:left;
                  position:relative;
                  margin:0;
                  width:100%;
                  background:purple;
                  }
              #wrapper {
                  width:100%;
                  height:auto;
                  margin:0;
                  padding:0;
                  }
              }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="https://github.com/scottjehl/Respond/blob/master/respond.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul id="menu1"&gt;
                  &lt;li&gt;&lt;a href=""&gt;link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;link 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div id="bodywrapper"&gt;
          &lt;div id="main"&gt;
              111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
          &lt;/div&gt;
          &lt;div id="images"&gt;
              222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
          &lt;/div&gt;
          &lt;div id="related"&gt;
              333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>