title: Percentage width and fixed inner width problems
body: <p>Ok so long story short, A client of mine had me a do a project where, the design he specifically wanted called for a header wrapper of 100% width, and the inner div that contains the logo is 1300px width.</p>
  
  <p>The problem is that for example, on my 23 in screens, its fine, shows how its supposed to, but on smaller screens, theres a huge gap and the inner divs of the wrapper div are all misaligned.</p>
  
  <p>So for example say we have two divs, inner div is RED, outer div is DARK blue, and background is GREEN, on big screens, i get this(which is what i want)</p>
  
  <pre><code>    -------------------------------------------------------------------
     |      -----------------------------------|                         |
     |      |                                  |          end Of window-&gt;|         
     |      |red centered in the middle(1300px wide)   green **not** seen|
     |      -----------------------------------                          |
     |        wrapper header div @ 100% (DARKBLUE)                       |
     | ------------------------------------------------------------------
  </code></pre>
  
  <p>Now, on this above example, on the header, you cant see the green because the header wrapper
  div is 100%</p>
  
  <p>Now on smaller screens, like my13'mac/iphone/sammy tablet for example</p>
  
  <p>i get this</p>
  
  <pre><code>------------------------------------------------------------------------------|
  -----------------------------------|      |                                   |
  |                                  |      |     endOf parent header div       |  
  |      red                         |      |  &lt;--pushed all the way left       |
  -----------------------------------       |                                   |
    wrapper header div @ 100% (DARKBLUE)    |            GREEN                  |                                   
  ------------------------------------------------------------------------------|
  </code></pre>
  
  <p>So what im trying to illustrate is that, on smaller screens, the center div is pushed all the way left, and green is shown....</p>
  
  <p>any ideas as to why? again on all big screens its fine, on smaller ones, it breaks...</p>
  
  <p>the css i have applied to these is very simple.</p>
  
  <p>the RED div is: </p>
  
  <pre><code>#topRow{
      width:100%;
      height:120px;
  
      background-image:url(../../images/menuStripBg.png);
      background-repeat:repeat-x; 
  
  }
  </code></pre>
  
  <p>the inner div (DARKBLUE) is:</p>
  
  <pre><code>#topRowInner{
      min-width:1300px;
      margin:0px auto;    
  }
  </code></pre>
  
  <p>Now im <strong>ASSUMING</strong> that the problem is that, on smaller screens, since the width
  on the inner(dark blue) div is 1300px; that the smaller screens resolution is
  less than 1300, the screen at 100% throws it off, in essence, it cant center
  the 1300 if the parent wrappers 100% is less than 1300.....</p>
  
  <p>not sure if that makes any sense....</p>
  
  <p>in any case, if this is the problem, any idea how to get around this?</p>
  
  <p>if its not the problem, then any tips/hints etc i gladly appreciate.</p>
  
  <p>Thanks in advanced.</p>