Previous Message
Next Message

photo-caption pairs layout problem

Sent by Betsy Garfield on 13 September 2006 03:03


francky wrote:
> Betsy Garfield wrote:
> 
>> 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. ...
>>
>> 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>
> ...
> 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/
> 


Thanks, Francky, for a clever solution!

And thanks to you who wrote me off list. I had trouble with the header 
and turned on my borders but forget to look at the photo divs.

-- 

Betsy

webdesign: http://flamingofactory.com
photojournal: http://garfieldz.com
______________________________________________________________________
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: