title: Positioning div vertically
body: <p>I got something like this:  </p>
  
  <p><img src="https://i.stack.imgur.com/WA1K1.png" alt="enter image description here"></p>
  
  <p><strong>Solution right now:</strong><br>
  fixed height and negative top-value.  </p>
  
  <p>Now I want to position the red box vertically in the parent div, but it must be flexible, because there are options that might extend the red box with one or two more text-rows.  </p>
  
  <p>Sizes are 840x300px and the code right now is:  </p>
  
  <p><strong>HTML:</strong>  </p>
  
  <pre><code>&lt;div class="large-16 columns item"&gt;
  &lt;div class="box"&gt;
    &lt;div class="image"&gt;&lt;img src="system/html/band_test1-f5641934.jpg"&gt;&lt;/div&gt;
    &lt;div class="data red"&gt;
      &lt;h1&gt;&lt;a href="www.google.de" title="headliner" target="_blank"&gt;SEHR LANGER BANDNAME AHOI&lt;/a&gt;&lt;/h1&gt;
      &lt;h2&gt;&lt;a href="" title="venue" target="_blank"&gt;&lt;/a&gt;&lt;/h2&gt;
      &lt;p class="date"&gt;So, 28.07.2013&lt;/p&gt;
      &lt;p class="supportbands"&gt;+ &lt;a href="" title="Test Support" target="_blank"&gt;Test Support&lt;/a&gt;  &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS:</strong>  </p>
  
  <pre><code>.showsblock .item {
      height: 300px;
      margin-bottom: 20px;
  }
  
  .box .image img {
      border: 1px solid #a2a2a2;
  }
  .box .data {
      background: url('../show_bg_black.png') repeat;
      display: inline-block;
  
      position: relative;
      top: -165px;
      left: 1px;
  
      padding-right: 10px;
      min-width: 290px;
  
  }
  </code></pre>
  
  <p>This isn't very flexibel. When I add one more row into the red div, it expands but isn't centered anymore. Do you have an idea?<br>
  Also, I think there might be a better solution for the "image" div.  </p>
  
  <p>thank you.</p>