Drop caps change position when images are floated right - html

Question

I am trying to replicate as closely as possible the look of a book in html that includes drop caps floated left and multiple images that are floated right. Everything works fine with 1 image floated right...but the drop caps change position when more than 1 image is floated right. It looks fine in my editor but not in any browser I've tested. I've tried everything I can think of...
The css:
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}
The html
<div id="container">
<div class="floatright" id="imagediva"></div>
<div class="floatright" id="imagedivb"></div>
<h1 class="short">First Flight</h1>
<hr size="1" noshade>
<h2 class="short">1929</h2>
<br>
<p><span class="dropcap">W</span>alter’s first flight experience was in a two seater open biplane when he was ten years old. His father hired a pilot take Walter and his cousin Victor Azevedo on a flight around the Oakland, CA. airport, the same airport from which Amelia Earhart would begin her ill fated attempt to circumnavigate the globe six years later in 1937.
</p>
</div>

Answer 1

Check This Fiddle
Give absolute position to the paragraph tag and also give some width to it. This will solve your problem.
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
position: absolute;
width: 300px
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}