rows of thumbs

[Jeff]

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

[Harlan Messinger]

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?

[Ben C]

On 2008-05-05, Jeff <jeff@spam_me_not.comwrote:

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.

[dorayme]

In article <v5******************************@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:

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

[Jeff]

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?

[Jeff]

dorayme wrote:

In article <v5******************************@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:

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

Trouble is this stuff is typically database drive, then you usually
don't know what is going to be where. Say you change the sort or the search.

This sort of layout is really common for shopping pages. You never
know either the orientation of the product thumbnail image, or the
length of the description.

I think I may write a bit of javascript to retro fix this. My equal
height javascript code will reset bottom padding so that all blocks are
the same height. Of course that will do it for all blocks. What I'm
thinking of now is to do this one "row" at a time. I think that is
cleaner than throwing in js created clearing blocks.

BTW, I think you are the only one here that would be interested, but
I had my first and probably only photo show at a local 503C (non profit)
Gallery. Nobody ever sells anything at these places but I sold 23 items.
I've been working on this for months...

Jeff

>