title: Floating all images in a class
body: <p>Exact instructions: Insert a style to float all img elements belonging to the irregularWrap class on the right margin, but only when the right margin is clear of other floating elements.</p>
  
  <p>I'm not really sure what this question means? I get the float property but whats does it mean by only when the right margin is clear of other floating elements?</p>
  
  <pre><code>&lt;img src="images/student1.jpg" alt="" class="irregularWrap"&gt;
  &lt;img src="images/student2.jpg" alt="" class="irregularWrap"&gt;  
  &lt;img src="images/student3.jpg" alt="" class="irregularWrap"&gt;
  &lt;img src="images/student4.jpg" alt="" class="irregularWrap"&gt;
  &lt;img src="images/student5.jpg" alt="" class="irregularWrap"&gt;
  </code></pre>
  
  <p>So those are the images, basically, its one images cut into 5 seperate pieces horizontally to make the words look like they kinda outline the image around the left edge.</p>
  
  <p>The CSS I currently have is:</p>
  
  <pre><code>.irregularWrap { float: right; margin: 0px; }
  </code></pre>
  
  <p>I'm not sure if I'm just overthinking this due to my brain being fried trying to prepare for finals or if this is really just something we didn't quite cover. Any ideas where I'm messing up here?</p>
  
  <p><a href="http://i.stack.imgur.com/3km63.png" rel="nofollow">This is what all 5 images should look like when they come together as the one picture.</a></p>
  
  <p><a href="http://i.stack.imgur.com/Y1QNT.png" rel="nofollow">to clarify, this is what I'm getting with the 5 images, instead of them looking as they do in the previous image</a></p>