VLJMZY

index.html

<!-- The "container" for the floating elements.
     You need to set overflow:auto so that
     the box doesn't collapse when all its
     children are floating.-->
<div class="cont">
  <!-- These boxes will both float to the left
       that means they will be side-by-side -->
  <div class="left">
    <img src="http://cdn.shopify.com/s/files/1/0284/0524/products/redfish_hunt_1024x1024.jpg?v=1385478350">
  </div>
  <div class="left">
    <a href="#">Sample Text</a>
  </div>
</div>  

style.css

.cont { 
  /* we want the container to be the full width of its parent element*/ 
  width: 600px;
  border: 1px solid #ccc;
  
 /* this prevents the container from collapsing */
  overflow: auto;
}

/* these styles will apply to both boxes */
.left {
  /* We make sure they have the same height. This should be the 
  height of the image + 2 times the margin (you need top and bottom) */
  height: 122px; 
  /* and that they are side-by-side */ 
  float: left;
  /* and that their contents are centered from left to right*/
  text-align: center;
  /* set them both to 80% width of their parent (we'll fix this in a sec) */
  width: 80%;
  /* change their positioning to relative */
  position: relative;
}

/* this only applies to the first box */
.left:first-child {
  /* we fix the width so it adds up to 100% */ 
  width: 20%;
  /* and align it to the left*/
  text-align: left;
}

.left a {
  /* you can only position block elements, and 'a' elements 
    are normally inline elements. force them to be block. */
  display: block; 
  /* relative positioning lets us choose where to move it to. */
  position: relative; 
  /* make the top of the link be 1/2 way down the parent box.*/
  top: 50%;
  /* that last instruction pushes it a little too low. because
    the TOP of the link is at the 1/2 way point. ideally, we 
    could have told it that the middle of the link should be at
    even with the 1/2 way point. but we can use negative top
    margin to fix this. we will scoot the link back up by 1/2 
    of its height. */
   margin-top: -0.5em;
}

.left img { 
  width: 154px; 
  height: 102px; 
  margin: 10px;
}

VLJMZY.markdown

VLJMZY

A Pen by Captain Anonymous on CodePen.

License.