Previous Message
Next Message

photo-caption pairs layout problem

Sent by francky on 13 September 2006 02:02


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-REMOVED]]
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/
Previous Message
Next Message

Message thread: