1 reply [Last post]
andy.stangeland...
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-05
Posts: 2
Points: 0

Evgenia posted a similar floating block problem a few days ago. I think mine is much harder however.

Essentially, I need a table of varying-height blocks. So that each row completely clears the row before it. Sounds easy enough, but here's the kicker: the rows will be the full width of the window so the blocks need to wrap down to the next row if there isn't enough space. Varying number of columns...I guess the <table> is out Smile

Let me describe my problem in more detail.

I have an arrangement of floating fixed-width div's pulled from a database similar to Evgenia's. Most of these divs are the same height (150px), but some of them have one or more fixed-height (50px) images attached vertically underneath them.

So all the blocks are all 200px width, and mostly 150px in height, but the ones with images stacked underneath might be 200px, 250px, 300px, 350px...

Now its all well and good when the blocks are all the same height, the line up nicely and wrap to any sized row. But if they are mostly 150px height and there is one long one say 350px in height in the middle of the row they don't clear it. They go half way across and stack up against the long block.

Here as see an image of what's wrong and what I want it to do here. Or attached.

This is for an internal application so it only has to work on IE6/7 and javascript can be used. They already have to have javascript turned on just to get to this page.

So I've come up with two solutions so far. One is to set some element to clear the floats, for example every sixth element is set to clear:left. This looks fine in the correct window size, but I also need to print, and these blocks might be printed on a standard letter sized piece of paper or something 4-foot wide so I have no idea where to put the clearing tags. I can't even do it dynamically because I don't think there is anyway to get javascript to determine the paper size and move the clearing tags around only when printing.

My second solution was to force all the blocks to be the same height as the tallest block. This works fine and they clear okay, but they leave extra space that they don't need to. For example, if there is one row with a 400px-tall block then that row would be extended to 400px in height (as it should be). But if all the other rows have only 150px blocks they will be leaving 250px in padding that they don't need. The idea is to look neat, clean and save as much space as possible. A hundred blocks wouldn't be uncommon so there could be a lot of rows, which would be a lot of wasted space.

I can't believe that I can't fix this...not even with Javascript since the solution has to work for printing, too.

AttachmentSize
example.jpg19.58 KB
andy.stangeland...
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-05
Posts: 2
Points: 0

Solution

I've been thinking about this for over a week an came up with nothing, but writing down the problem must of helped me think it through. The solution was to display the blocks inline. So I set block-div to { display: inline; zoom: 1; } (I didn't do any hacks to get inline-block for real browsers because it doesn't need to work in FF.)

I set the vertical-align to top in the block then I had to reset it to baseline because it is inherited and was screwing up some other text. I set the container to text-align:left since I was floating them before the text-align wasn't affecting the blocks.

Lets see, I also had to do a little tinkering with the contained elements to make sure they were expanding the block to the full height. I had some absolutely positioned elements that weren't expanding the block, so I set some of them to floats and then set a big padding-top in the block to push the floats past the end of the absolutely positioned elements.

Hope this helps someone else. It looks beautiful by the way. None of the rows is any bigger than it needs to be. It expands and contracts beautifully and is pure css, I don't have to update anything with javascript when the height changes the row fixes itself.