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 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/
