title: Keeping lists from wrapping around image
body: <p>I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.</p>
  
  <p>Here's the Codepen: <a href="http://codepen.io/carlos_serrano/pen/ikjeg" rel="nofollow">http://codepen.io/carlos_serrano/pen/ikjeg</a></p>
  
  <p>and here the code for what I have so far: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;img src="any 100x 100 image.gif"&gt;
  &lt;h3&gt;Heading&lt;/h3&gt;
  &lt;p&gt;Just random text here.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="linkcontainer"&gt;
  &lt;div class="linkleft"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#unique-identifier1"&gt;Left Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#unique-identifier2"&gt;Left Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#unique-identifier3"&gt;Left Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="linkright"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#unique-identifier1"&gt;Right Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#unique-identifier2"&gt;Right Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#unique-identifier3"&gt;Right Item 3&lt;/a&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>p{
  overflow: hidden;
  }
  
  img{
  float:left;
  margin: 0 25px;
  }
  
  .linkcontainer {
  width: 50%;
  padding-bottom: 25px;
  clear: both;
  }
  
  .linkleft, .linkright {
  width: 100%;
  float: right;
  }
  
  @media only screen and (min-width: 481px) {
      .linkleft, .linkright {
       display: inline-block;
       width: 30%;
       float: left;
      }
  }
  </code></pre>