title: Responsive 50% 2 column html/css
body: <p>I suspect that what I want to achieve might not be possible with plain HTML/CSS, but here goes anyway. I would like a 2 column layout which wraps nicely on mobile devices. Each column to take up 50% of the container width if there is room, but 100% of the container width if they wrap.</p>
  
  <p>Here is some example markup:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html xml:lang="en-gb" lang="en-gb" &gt;
  &lt;head&gt;
      &lt;title&gt;Responsive 2 col&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .colcontainer
          {
              width: auto;
              overflow:hidden;
              border: solid 1px red;
          }
          .leftcol
          {
              width: 49%;
              float: left;
              margin-right:10px;
              border: solid 1px blue;
          }
          .rightcol
          {
              width: 49%;
              float: left;
              border: solid 1px green;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="colcontainer"&gt;
          &lt;div class="leftcol"&gt;
              Here is a paragraph which has enough text to cause it to take up a fair amount of width if left to its own devices.
          &lt;/div&gt;
          &lt;div class="rightcol"&gt;
              A smaller paragraph.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This looks OK but when you squash the browser width to make the divs wrap, they still only take up 50% of the container width each. By removing the width:49%, it wraps nicely and fills the available width but the columns are no longer evenly split when not wrapped. Is there any way of making them fill the available width when wrapped, but take up 50% of the available width when not wrapped?</p>