rows of thumbs
in [CSS]
|
Prev: How to center nested divs
Next: Multiple CSS Classes
From: Jeff on 5 May 2008 13:34 I'd like to revisit an old irritant of mine and see if there any new ideas. Rows of "thumbs", typically an image and some text, perhaps a form, wrapped in a div. If you float left everthing, when the row wraps the next row starts at the lowest block for the previous row. This gives a very displeasing staggered look. You can count blocks and throw in a clearing div, but then you are fixed on a certain number per row. You can set a height that is greater than the highest you might expect, but then you have perhaps needless negative space. The real solution would lie along display: inline-block, but it appears that only Safari gets this right. One possible choice for me would be to use my equal column height javascript code and have all the blocks pad out to the same height. Who has another idea? On another note, what are we doing for min-width these days. Jeff
From: Harlan Messinger on 5 May 2008 13:46 Jeff wrote: > I'd like to revisit an old irritant of mine and see if there any new > ideas. > > Rows of "thumbs", typically an image and some text, perhaps a form, > wrapped in a div. > > If you float left everthing, when the row wraps the next row starts at > the lowest block for the previous row. This gives a very displeasing > staggered look. It isn't clear to me what you mean by "starts at" or what "the lowest block for the previous row" means. Are you complaining that the next row should be higher than it is, lower than it is, or what? We've got two dimensions here, and two directions in each, so your description is vague and it isn't obvious what's bothering you. A URL would help. I can take a wild stab and ask: have you set margin-bottom on each of these DIVs?
From: Ben C on 5 May 2008 16:27 On 2008-05-05, Jeff <jeff(a)spam_me_not.com> wrote: > I'd like to revisit an old irritant of mine and see if there any new > ideas. > > Rows of "thumbs", typically an image and some text, perhaps a form, > wrapped in a div. > > If you float left everthing, when the row wraps the next row starts > at the lowest block for the previous row. This gives a very displeasing > staggered look. > > You can count blocks and throw in a clearing div, but then you are > fixed on a certain number per row. You can set a height that is greater > than the highest you might expect, but then you have perhaps needless > negative space. > > The real solution would lie along display: inline-block, but it > appears that only Safari gets this right. > > One possible choice for me would be to use my equal column height > javascript code and have all the blocks pad out to the same height. > > Who has another idea? The situation is as you describe it with inline-block being the preferred but unsupported-in-Firefox-2 solution. If the images are just images, i.e. no captions or anything, then you can just leave them all as display: inline and not float them. If you're using floats you can avoid the staggering by making them all the same height.
From: dorayme on 5 May 2008 18:10 In article <v5SdnYsB85mA2ILVnZ2dnUVZ_i2dnZ2d(a)earthlink.com>, Jeff <jeff(a)spam_me_not.com> wrote: > I'd like to revisit an old irritant of mine and see if there any new > ideas. > > Rows of "thumbs", typically an image and some text, perhaps a form, > wrapped in a div. > > If you float left everthing, when the row wraps the next row starts > at the lowest block for the previous row. This gives a very displeasing > staggered look. > You can manage things by at least sorting landscapes from portraits to give you a head start. In the end, you either do a bit of sorting to keep like with like re height or buy the consequences about some symmetry untidiness. I prefer sorting and short captions (if the latter at all). <http://tinyurl.com/2jcs5r> -- dorayme
From: Jeff on 5 May 2008 18:12
Harlan Messinger wrote: > Jeff wrote: >> I'd like to revisit an old irritant of mine and see if there any new >> ideas. >> >> Rows of "thumbs", typically an image and some text, perhaps a form, >> wrapped in a div. >> >> If you float left everthing, when the row wraps the next row starts >> at the lowest block for the previous row. This gives a very >> displeasing staggered look. > > It isn't clear to me what you mean by "starts at" or what "the lowest > block for the previous row" means. Are you complaining that the next row > should be higher than it is, lower than it is, or what? We've got two > dimensions here, and two directions in each, so your description is > vague and it isn't obvious what's bothering you. A URL would help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <style type="text/css"> ..block{float: left;width: 190px;border: 1px solid black;margin-top: 25px;padding: 5px;} </style> <div class="block"> line one<br /> line twoa </div> <div class="block"> line one<br /> two<br /> three </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> <div class="block"> line one<br /> line two </div> > > I can take a wild stab and ask: have you set margin-bottom on each of > these DIVs? |