Betsy Garfield wrote:
>Oops. It's taken me this long to realize I forgot to add the URLs. I
>really wanted to look smart here :-)
>
>I wanted a fluid layout for photo-caption pairs. Except for the trouble
>of putting every pair into its own div, it's a simple layout. But I'm
>getting some gaps in the layout and I can't figure out why. All the
>photos are the same size and orientation. Would appreciate comments.
>Thanks!
>
>html: http://wrjsoutheast.org/savannah.html
>css: http://wrjsoutheast.org/inside3.css
>
>
Hi Betsy,
If you turn on the "Outline > Outline Block Level Elements" in the FF
Webdeveloper toolbar [1], you 'll see immediately what is happening:
some of the picture boxes have a different height, and a next box can
not float back to the left of the page; it just has to stop floating to
where the right side of the large box is ending.
See screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-savannah.jpg>.
To get the photo's in pairs: you can make a class="leftclear" with
.leftclear {clear: left;}
and place that after each pair of photo containers:
<div class="float">
<img src="image1.jpg">
<p class="caption">A, B and C</p>
</div>
<div class="float">
<img src="image2.jpg">
<p class="caption">D, E and F</p>
</div>
<div class="float leftclear">
<img src="image3.jpg">
<p class="caption">G and H</p>
</div>
<div class="float">
<img src="image4.jpg">
<p class="caption">I, J, K and L</p>
</div>
<div class="float leftclear">
<img src="image5.jpg">
<p class="caption">M and N are a pair</p>
</div>
<div class="float">
<img src="image6.jpg">
<p class="caption">More pairs</p>
</div>
Then the bottom of each pair wil get the level of the lowest one of
both, and the new pair can start at the real left side. :-)
Greetings,
francky
[1] http://chrispederick.com/work/webdeveloper/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
