Alignment error - html

Question

I have a bilingual page which is basically two columns with English text on the left and French on the right. The CSS for this is as follows:
div.ltext
{
margin: 10px 30px 0 60px;
line-height: 130%;
width:390px;
font-size:10pt;
font-weight:normal;
text-align:justify;
overflow:hidden;
float:left;
}
div.rtext
{
margin: 10px 60px 0 30px;
padding-left:30px;
line-height: 130%;
width:390px;
font-size:10pt;
font-weight:normal;
text-align:justify;
overflow:hidden;
}
At intervals the text is interspersed with an image (centered). The CSS of the images is as follows:
.pic
{
width:390px;
margin: 10px auto 10px auto;
}
The HTML looks like this:
<div class="ltext"><p>This grouping...</p></div>
<div class="rtext"><p><i>Cette plantation...</i> </p></div>
<div class="pic"><a onclick="loadImage('gdCG2013Jan05.jpg')" href="#4">
<imgwidth="390" border="0" src="gdCG2013Jan05tn.jpg"></img></a></div>
<div class="ltext"><p>Next,... </p></div>
<div class="rtext"><p><i>Suivant...</i> </p></div>
The problem is that whenever an image division (.pic) is inserted, the following text blocks are out of alignment (the French text on the right is approximately one line higher than the English. If I remove the image so that there are two consecutive blocks of bilingual text like this:
<div class="ltext"><p>This grouping...</p></div>
<div class="rtext"><p>Cette plantation...</p></div>
<! div class="pic"> removed
<div class="ltext"><p>Next...</p></div>
<div class="rtext"><p>Suivant deux...</p></div>
the alignment of the second set of blocks is correct. The problem is also corrected if I insert a dummy spacer division 1 pixel high between the image division and the following text divisions, thus:
.spacer {width:960px; height:1px; }
<div class="pic"> etc..</div>
<div class="spacer"> </div>
<div class="ltext"> etc... </div>
<div class="rtext"> etc. </div>
This last is a simple enough workaround but I would like to know what's going wrong here. (By the way, enclosing the following text blocks in a wrapper division doesn't solve the problem).

Answer 1

Create a container for the divs you dont want to move.
<div>
<div class="ltext"><p>This grouping...</p></div>
<div class="rtext"><p><i>Cette plantation...</i> </p></div>
</div>
<div class="pic"><a onclick="loadImage('gdCG2013Jan05.jpg')" href="#4">
<img width="390" border="0" src="gdCG2013Jan05tn.jpg"></img></a></div>
<div>
<div class="ltext"><p>Next,... </p></div>
<div class="rtext"><p><i>Suivant...</i> </p></div>
</div>
Your JSFiddle example does not have any image, but I suppose from what you've said the problem is that other elements appearing are moving the elements already existing.