css float - CSS div position overlay images

Question

I have stated creating a simple MVC 4 Site which can be seen here: problem site

I would like the alternating images to appear to the right of the paragraph within the blue border.

To alternate the images I am using the authors initial JS from here: JQuery

<script type="text/javascript">
jQuery(document).ready(function() {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    },
      3000);
});
</script>

The markup from my index.cshtml is as follows:

<div id="intro">
    <p>
    Don't let memories fade - preserve them for generations to come.<br />
    Yorkshire Image Scanning can create perfect digital copies of your photographs, stored on DVD or USB memory stick.
    The access the digital images simply insert into a DVD player and a slideshow will start to run. 
    Alternatively, the images can be copied to your PC, iPad, smartphone etc and backed up using any normal method such as external hard disk or DVD copies or cloud storage.
    Of course, digital images are so much easier to share than old photographs. Upload them to facebook and let distant friends share your memories!
    </p>
</div>
<div class="fadein">
    <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" />
</div>

The CSS is as follows:

#intro {
   float: left;
   width: 50%;
}

.fadein { width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

Could anyone please advise what I need to do to move the images? It seems that unless I have the .fadin img with a position:absolute then I get to see each of the images at the same time when jQuery flicks to the next image. I don't know how to set the all images to a position relative to the previous div so that each image overlays the previous?

Answer 1

Make your .fadein relative and float right and that should give you what you want.

EDIT: Thanks to Ilya Streltsyn You'd be better off using margin-left: auto on your .fadein div. This would prevent the parent from collapsing when using floats.