title: HTML CSS Picture with a text box on the side
body: <p>Need to get this (the top picture/box) :</p>
  
  <p><img src="https://i.stack.imgur.com/mnlnL.png" alt=""></p>
  
  <p>But currently, this is what happens:</p>
  
  <p><img src="https://i.stack.imgur.com/MHiAF.png" alt=""></p>
  
  <p>I have set up box on the top to be exact width of the text box + picture combined, but the box climbs on to the left side of the picture, and the picture doesn't stick to the right side of the column too.</p>
  
  <p>JsFiddle link: <a href="http://jsfiddle.net/JkA25/" rel="nofollow noreferrer">http://jsfiddle.net/JkA25/</a></p>
  
  <p>(Since I can't post jsfiddle only, here's the code)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rightCol1"&gt;
  
      &lt;div class="theBox2"&gt;&lt;a href="#"&gt;
          &lt;img src="http://imgur.com/o4G7tD0.jpg"&gt;
               &lt;div class="txtBox2"&gt;&lt;h4&gt;2014 02 16&lt;/h4&gt;&lt;h5&gt;vasaros &lt;br&gt; krepšinio &lt;br&gt; stovykla &lt;br&gt; ignalinoje 2014&lt;/h5&gt;
               &lt;/div&gt;&lt;/a&gt;
       &lt;/div&gt;
  
      &lt;div class="theBox3"&gt;&lt;a href="#"&gt;
          &lt;img src="http://imgur.com/3Gp62Mt.png"&gt;
          &lt;div class="txtBox3"&gt;&lt;h4&gt;2014 02 16&lt;/h4&gt;&lt;h5&gt;geriausias sezono &lt;br&gt; startas per visą klubo   &lt;br&gt; istoriją &lt;/h5&gt;
          &lt;/div&gt; &lt;/a&gt;
      &lt;/div&gt; 
  
      &lt;div class="theBox3"&gt;&lt;a href="#"&gt;
          &lt;img src="http://imgur.com/3Gp62Mt.png"&gt;
           &lt;div class="txtBox3"&gt;&lt;h4&gt;2014 02 16&lt;/h4&gt;&lt;h5&gt;po pirmojo etapo &lt;br&gt; naudingiausi - osvaldas  &lt;br&gt; sarpalius ir lukas &lt;br&gt;šukutis&lt;/h5&gt;
           &lt;/div&gt; &lt;/a&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.rightCol1{
  
          float:right;
          margin-top:10px;
      }   
  
      .theBox2{
          border-radius: 5px;
          width: 483px;
          height: 244px;  
          overflow: hidden;
          position: relative;
          margin: 10px 0px 40px 15px;
  
      }
  
      .txtBox2{
          position: absolute;
          height: 244px;
          width: 175px;
          background:url(http://i.imgur.com/sGWRvSp.png?1);
          bottom: 0; 
          left:0px;
  
  
      }
  
      .theBox3{
  
          width: 234px;
          height: 330px;
          border-radius: 5px;
          overflow: hidden;
          position: relative;
          margin: 10px 0px 40px 15px;
          display:inline-block;
      }
  
      .txtBox3{
  
          position: absolute;
          height: 140px;
          width: 100%;
          background:url(http://i.imgur.com/sGWRvSp.png?1);
          bottom: 0; 
      }
  
      h4{ 
          padding:0;
          margin:10px 0 10px 15px;
          font-size:13;
          font-weight:bold;
          color:#e6540c;
      }
  
      h5{ 
          padding:0;
          margin:10px 0 10px 15px;
          font-size:16;
          font-weight:400;
          text-transform:uppercase;
          color:rgb(230,230,230);
      }
  </code></pre>