title: Two elements how to arrange them one after another
body: <p>I have an html file(<em>index.html</em>) and a css file(<em>style.css</em>), there is the jsfiddle : <a href="http://jsfiddle.net/RZm5y/2/" rel="nofollow">http://jsfiddle.net/RZm5y/2/</a> .<br />
  <br/>
  <em>index.html</em></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;demo&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="nav"&gt;
          &lt;div class="logo"&gt;artistLog&lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="topbar"&gt;This is the top search/login bar&lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;div class="card"&gt;
          &lt;img class="cover" src="img/cover.png" /&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;Description&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br/>
  <em>style.css</em><br /></p>
  
  <pre><code>html, body {
      background: #343434;
      margin:0px;
      height: 100%;
      overflow: hidden;
      position: relative;
  }
  .nav {
      background: #565656;
      color: #b4b4b4;
      margin-right:0px;
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
      border-right:7px solid #2b2b2b;
      width: 86px;
  }
  .nav .logo {
      background:#353535;
      height:60px;
      cursor:pointer;
      border-bottom:1px solid #353535;
  }
  .topbar {
      background: #1d1d1d;
      border-bottom: 1px solid #8d8d8d;
      height: 60px;
      left: 86px;
      position: absolute;
      right: 0;
      top: 0;
  }
  .content {
      bottom: 0;
      left: 120px;
      overflow: auto;
      position: absolute;
      right: 0;
      top: 62px;
      padding: 50px 25px 25px 20px;
  }
  .content .card {
      background: #101010;
      color:#a4a4a4;
      width:250px;
      height:320px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      margin-right:10px;
      margin-bottom: 15px;
  }
  .content .card .cover {
      max-width:250px;
      max-height:140px;
      background: transparent;
      float:left;
      -webkit-border-top-left-radius: 6px;
      -webkit-border-top-right-radius: 6px;
      -moz-border-radius-topleft: 6px;
      -moz-border-radius-topright: 6px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
  }
  </code></pre>
  
  <p>I want the cards inside the content to be showed one after another not one under another when the display is big enough to show minimum 2 cards one after another else show one under another.</p>