title: Move div to new line
body: <p>I'm pretty new to CSS and it is still magic for me.<br>
  I want to have my div <code>movie_item_content_plot</code> on a new line. Currently I use <code>&lt;br&gt;</code> in HTML and this works fine. When I replace the <code>&lt;br&gt;</code> with <code>clear: both;</code> the div appears between <code>movie_item_poster</code> and <code>movie_item_toolbar</code> - but this is not what I want to have. It should be in <code>movie_item_content</code> but under <code>movie_item_year</code> and <code>movie_item_plot</code>.</p>
  
  <p><a href="http://jsfiddle.net/PCsBP/" rel="noreferrer">Here</a> is a fiddle to play around with.</p>
  
  <h2>wanted layout (<code>&lt;br&gt;</code>)</h2>
  
  <p><img src="https://i.stack.imgur.com/dE5KZ.png" alt="wanted layout"></p>
  
  <h2>wrong layout (<code>clear: both;</code>)</h2>
  
  <p><img src="https://i.stack.imgur.com/tZx9N.png" alt="wrong layout"></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="movie_item"&gt;
      &lt;div class="movie_item_poster"&gt;
          &lt;img src="..." style="max-width: 100%; max-height: 100%;"&gt;
      &lt;/div&gt;
  
       &lt;div id="movie_item_content"&gt;
          &lt;div class="movie_item_content_title"&gt;title&lt;/div&gt;
          &lt;div class="movie_item_content_year"&gt;year&lt;/div&gt;
          &lt;br&gt; &lt;!-- I want to replace this br --&gt;
          &lt;div class="movie_item_content_plot"&gt;plot&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="movie_item_toolbar"&gt;
          Lorem Ipsum...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#movie_item {
      display: block;
      margin-top: 10px;
      height: 175px;
  }
  
  .movie_item_poster {
      float: left;
      height: 150px;
      width: 100px;
  }
  
  .movie_item_content {
      float: right;
  }
  
  .movie_item_content_title {
      float: left;
  }
  
  .movie_item_content_year {
      float: right;
  }
  
  .movie_item_content_plot {
  
  }
  
  .movie_item_toolbar {
      clear: both;
      vertical-align: bottom;
      width: 100%;
      height: 25px;
  }
  </code></pre>