Divs that are floated left are overlapping. I dont want them to overlap

Question

I want to be able to float divs one, two and fin and at the same time have them not overlap upon the other. Right now as it is set up, when I have a look at it on a smaller screen, fin lands on top on top of two and two on top of fin.

Any kind of help in this direction will be appreciated.

Here is the html code:

<div class="iwrapper">
  <div class="one">
    <center>
    <div id="i1">
    </div>
    <div>
      <span class="img-tag">The BALD DESIGNER Look</span>
   </div>
   </center>
 </div>
 <div class="two">
 <center>
   <div id="i2">
   </div>
   <div>
     <span class="img-tag">Meet TECHNODEN- My Home Design Space</span>
   </div>
 </center>
 </div>

<div class="fin">
   <a href="http://www.vrohit.com/wp-content/uploads/2014/01/Resume_RohitVairamohan.pdf" target="_blank">Grab my Resume</a>
   <div class="descpt">Facts about Me</div><div style="font-size: 90%; font-weight: 400; line-height: 1.7em;" > 
   > I love to go hiking and on adventure trails. This helps me often think of adventurous and innovative solutions to critical problems.
   > Being a trained classical singer, I introduce new rhythm into my designs. 
   > I am good at finding an organization among my disorganized belongings and this helps me be clinical and find patterns during my research.
   > And Yes, you may have guessed it by now; my favorite color is Green.
   </div>
</div>
<div class="clear12fin"></div>
</div>

and here is the CSS associated with it:

.clear12fin{
clear: both;
}

.iwrapper {
width:99%;
}

#i1{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-picg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

#i1:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-pic.png");}

#i2{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspaceg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

#i2:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspace.png");}



.one{float:left; width:32%; margin-right:1%;}
.two{float:left; width:32%; margin-right:1%;}
.fin{display:inline-block; width:33%;
}

Answer 1

Set a min-width on .iwrapper

CSS

.iwrapper {
    width:99%;
    min-width: 930px; /* image width plus 30px for a 10px margin between divs*/   
}

Have a fiddle - Fiddle Link!

Answer 2

Please use the @media query to make your page responsive... you can set the positioning of the elements based on the screen size by using @media in your css.. if you need help with that, let me know..