Getting a combination of float and table behavior

[phpknight]

I have a list of divs that are 320px high and 250px wide and float: left.  The result is that I get boxes that wrap with the screen.  If the user has a small screen, he might see two per row, but another person might see five per row.  This is great, but users also submit certain data to be displayed inside the blocks, so I have to clip their input to make the box always display the same height.  The result, though, is that many boxes have space where the user decided not to write anything, and others clip when too much is written.

 

I would like the rows to have table-like behavior so that they grow and shrink depending on how much the user wrote.  That being said, I do not want to be stuck at, say, three columns but desire that every screen resolution sees the site as filling it.

 

Has anybody out there accomplished this, or is it really one or the other?

[dbrimlow]

This is the old "equal height box" problem.

 

This is really a toughie at present because the solution is not cross-browser compatible.

 

What you are seeking is "min-height" and "max-height". This works in real browsers but is, of course, not supported by IE.

 

There are some very creative hacks to make IE somewhat mimic the min/max commands, but they are very wonkey.

 

In real browsers you would specify the following:

.boxes {
max-height:320px;
min-height:250px
}

 

In IE you would use an "expression" within an "IE conditional comment", but I don't know how the syntax to specify the heights is presented for your particular example.

 

 

[phpknight]

Okay, thanks for your input.  It does look like I am stuck, then, lol.

[bronzemonkey]

If this is the layout you really want, then you should use min/max height to get your desired affect in proper browsers and then target IE6 with a conditional stylesheet to create a compromise or alternatively layout for users with that browser. You could keep the fixed height and use a scrollbar for when the content overflows. It would also avoid the potential for very weird on-screen appearances if users submitted a lot of content for one box (which because very tall) and very little for others.

 

Best to go with the layout/appearance that you want and then worry about if it, or something similar, can be produced for IE6 users.

 

 

[phpknight]

I am currently using that scrollbar solution.  The problem with min/max is that once one box becomes larger than the others, the float no longer wraps in a neat grid.  Instead of

 

1 2 3 4

5 6 7 8

 

you might get

 

1 2 3 4

  5 6 7

8

 

or something else weird because the higher position is preferred in CSS as opposed to left or right.

[dbrimlow]

You know what? When in this situation - and it is a "must do" - go ahead and use a table ( anyone see Toonmariner?).

 

I can't believe I'm going to say this, but, until css and IE eventually see eye to eye, sometimes a table is the only solution. There. I said it.