title: What css rules would you use to support smaller screens and resizing?
body: <p>I'm currently having problems with resizing the window which cuts off a lot of the page and the elements which are positioned relatively to the document fly off the page.
  Heres what it looks like:</p>
  
  <p>Normal: <a href="http://i.imgur.com/KpnUOwI.png" rel="nofollow">http://i.imgur.com/KpnUOwI.png</a></p>
  
  <p>Minimized: <a href="http://i.imgur.com/CfCrmub.png" rel="nofollow">http://i.imgur.com/CfCrmub.png</a></p>
  
  <p>scrolled to the end while minimized:  <a href="http://i.imgur.com/p8dwiP9.png" rel="nofollow">http://i.imgur.com/p8dwiP9.png</a></p>
  
  <p>I either want the blue elements to go right to end even if it's minimized (It's width:100%) or have the elements resize proportionally to the window and fit everything in (everything is positioned relatively to the document)</p>
  
  <p>css: </p>
  
  <pre><code> body {
      margin:0;
      padding:0;
      height:100%;
      width:100%;
      position:relative;
      overflow:auto;
  }
  
  #headr {
          background-image:url(../images/top%20bg.jpg);
          background-repeat:no-repeat;
          height:400px;
          width:100%;
          position:relative;
          z-index:-100;
          overflow:hidden;
  }
  
  #lgo {
      position:relative;
      margin-left:33%;
      margin-top:80px;
  } 
  
  #nav {
      background-image:url(../images/nav%20bar.png);
      position:relative;
      top:0;
      margin-top:0px;
      width:100%;
      width:!important;
      height:99px;
  }
  
  #listone {
      list-style-type:none;
      display:inline;
      margin-left:570px;
      top:25px;
      position:relative;
      overflow:hidden;
  }
  
  .navlist {
      display:inline;
      font-size:33px;
      padding:25px;
      color:#FFF;
      font-weight:bold;
      font-family:Verdana, Geneva, sans-serif;
      position:static;
  }
  
  #searchb {
      background-image:url(../images/search.png);
      background-repeat:no-repeat;
      width:500px;
      height:200px;
      position:relative;
      padding:0px;
      margin-left:1350px;
      margin-top:-85px;
  }
  
  #searchb form {
      display:inline;
  }
  #searchbar {
      background-color:transparent;
      border:0px;
      position:absolute;
      top:50px;
      left:60px;
      width:200px;
      height:80px;
      outline:none;
      font-size:24px;
  }
  
  .searchsubmit {
      border:0px;
      background-color:transparent;
      position:absolute;
      top:70px;
      left:400px;
      width:30px;
      height:50px;
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>    &lt;body&gt;
  &lt;div id="nav"&gt;
  &lt;ul id="listone"&gt;
  &lt;li class="navlist"&gt;Home&lt;/li&gt;
  &lt;li class="navlist"&gt;Portfolio&lt;/li&gt;
  &lt;li class="navlist"&gt;Prices&lt;/li&gt;
  &lt;li class="navlist"&gt;Contact&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;div id="searchb"&gt;
  &lt;form&gt;
  &lt;input type="text" id="searchbar" placeholder="Search"&gt;
  &lt;input type="image" class="searchsubmit" src="images/searchicon.png" value=""&gt;
  &lt;/form&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="headr"&gt;
  &lt;!--&lt;img src="images/head logo.png" id="lgo"&gt; --&gt;
  &lt;/div&gt;
  </code></pre>