title: Responsive CSS / Inline divs
body: <p>I am trying to use CSS to put a <code>100% width div</code> across the page and then under that <code>div</code> 2 <code>div</code>s <code>inline</code> that are <code>50%</code> each each <code>10px padding</code> on all the <code>div</code>s and then as the page gets smaller make the two <code>50%</code> <code>div</code>s change to <code>100%</code></p>
  
  <p>here is what i have so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body,html {
      margin:0;
      padding:0;
  }
  .outer {
      width:100%;
  }
  .topblock {
      width:100%;
      padding:10px;
      border:1px solid black;
  }
  .block1 {
      width:48%;
      padding:1%;
      float:left;
      display:inline;
      border:1px solid black;
  }
  .block2 {
      width:48%;
      padding:1%;
      float:left;
      display:inline;
      border:1px solid black;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
  
  &lt;div class="topblock"&gt;
  tickets
  &lt;/div&gt;
  
  &lt;div class="block1"&gt;
  service orders
  &lt;/div&gt;
  
  &lt;div class="block2"&gt;
  tickets 2
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>whats the best way to do this?</p>
  
  <p>here is a fiddle also: <a href="http://jsfiddle.net/dd6Wb/" rel="nofollow">http://jsfiddle.net/dd6Wb/</a></p>