David Sharp wrote: > Trish Meyer wrote: > >> I do pics and captions for an art gallery, but each image is in its >> own floated div - as in >> http://www.vivagallery.org/exhibits/SCORE_2006/index.html >> >> >> > Thanks for replying Trish, > > This is a good solution and probably what I will have to end up going > with, but it does have two drawbacks compared to what I would /ideally/ > like to have. Firstly each "picturebox" is the same defined width - I > guess to create the illusion that they are centered when really they are > floated left. I would prefer the picturebox to be the width of the image > plus padding. Secondly (although I guess pretty much related to the > first) is that this solution again would look very "left aligned" when > dealing with either a variable number of images, or conversely a fluid > container width. > > Is there no way to do this inline, or conversely simulate a kind of > {float : center}? >
Georg already addressed your concern about the overall left alignment of the gallery. I wanted to address your concern about having a fixed width on each div that holds a photo, instead of leaving it widthless and having it shrinkwrap to the size of the picture. You can do this, but it doesn't work well if you have a caption within the div. If the caption grows wider than the photo, so will the div. This is why you usually see divs holding both photos and captions fixed in width. You'll often see the divs fixed in height as well (as the Eric Meyer-based examples cited earlier were) but this is problematic because the caption text can grow longer or larger and excede that height. The heights are set, though, to keep subsequent floats from catching on one another. You could consider creating two classes, one called portrait and one called landscape, and setting the widths in these. I do a similar sort of thing in most of my sites where I float images within the text. I generally develop two set sizes for horizontal and vertical images respectively, and apply these classes to the image divs. You'll still need to worry about the height issue, though. Using Georg's suggestion of inline-block gets around that: http://www.brunildo.org/test/ImgThumbIBL.html http://www.brunildo.org/test/ImgThumbIBL2b.html http://www.brunildo.org/test/ImgThumbIBL3.html Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
