floating images 2 x 2 - html

Question

I am using Joomla, Phoca Gallery Image Component and Phoca Callery module. It is not actaully the question about Joomla, but about CSS. Plugin creates gallery with 4 images. Those images should create 2 x 2 grid, using float:left.
Here is what I have as a result:
http://jsfiddle.net/qAx7c/ (original link: http://renathy.woano.lv/index.php/lv/par-mums-2)
.block {
border:1px solid #342e2b;
border-radius:7px;
padding: 12px 22px 12px 22px;
}
.block-box2 div.content-main {
width:50%;
display:inline-block;
float:left;
}
.block-box2 div.content-sidebar2 {
width:49.99%;
float:right;
}
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
/* FIXes */
#phocagallery-module-ri .phocagallery-box-file {
padding: 0 !important;
background: none !important;
}
#phocagallery-module-ri .phocagallery-box-file-first {
background: none !important;
}
#phocagallery-module-ri {
margin-left: 40px !important;
}
#phocagallery-module-ri div.mosaic a img {
border: 1px solid #342e2b !important;
/*border: none !important;*/
}
#phocagallery-module-ri div.mosaic a img, #phocagallery-module-ri div.mosaic img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
<div class="block block-box2 clearfix">
<div class="content-main">
<div class="item-page">
<h2>Par mums</h2>
Some text here
Some text here
</div>
</div>
<div class="content-sidebar2">
<div id="phocagallery-module-ri" style="text-align:center;">
<center style="padding:0px;margin:0px;">
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Atmosfēra" href="">
<img src="phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_dzerieni.jpg" alt="Par mums" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums ārpusē" href="#">
<img src="phoca_thumb_m_parmums_izskats.jpg" alt="Par mums ārpusē" width="170" height="150">
</a>
</div>
</center>
</div>
<div style="clear:both"></div>
</div>
As you see, one image is not floating correctly. The code of div phocagallery-module-ri is generated automatically.
I tried to change width, marings, paddings of images and divs, but nothing helps - one image is floating incorrectly, however it seems that everything should be fine.
Can you, please, give me some ideas, why this floating is broken?

Answer 1

The first image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
And the second image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
They have different height ( 150 and 149 ), this is the reason.
Changing the second image's height to 150 will works fine.

Answer 2

The issue is that the second image is less tall than the first. Therefore, the second floats next to the first, but the third one also floats left to the first, leaving a gap. The fourth one doesn't fit next to the third, so it wraps to a new line.
So that's the cause. Now for the solution, I'm not a CSS professional, so I cannot say which of the following solutions is best, nor if there is another, better one.
One solution would be to embed each image in a container that has a fixed height, or at least has the same height for each of them.
Other possible solutions would be to use a CSS table way of styling.
Thirdly, adding a clear:both element after each second image (since you only want two on a row) will break the floating.
Given the nature of the site and the pictures in the gallery, you may also choose to make each thumbnail image the same size. That will also solve it, by taking away the trigger of the problem.