html DIV float problem

mfoley · 06-29-2022, 11:47 PM

I am displaying a series of images in "float: left" DIVs. Normally this renders just fine. If I display 20 or 30 images, they just wrap to the next "line" beneath the previous row. All have text captions in the DIV. The problem occurs when one of the captions wraps to multiple lines. This makes that DIV taller than the rest on that same row. This messes up the next row of images in that they don't resume displaying at the left edge of the screen, but rather start displaying underneath and to the right of the "tall" DIV. For example:

Code:

--------  --------  --------  --------  --------  -------- 
|      |  |      |  |      |  |      |  |      |  |      |
|      |  |      |  |      |  |      |  |      |  |      |
|      |  |      |  |      |  |      |  |      |  |      |
--------  --------  --------  --------  --------  --------

--------  --------  --------  --------  --------  -------- 
|      |  |      |  |      |  |      |  |      |  |      |
|      |  |      |  |      |  |      |  |      |  |      |
|      |  |      |  |      |  |      |  |      |  |      |
--------  --------  --------  |      |  --------  --------
                              --------
                                        --------  -------- 
                                        |      |  |      |
                                        |      |  |      |
                                        |      |  |      | 
                                        --------  --------

How can I get images as shown in the last row to start at the left edge? I can't really put a <div style="clear: both"></div> after each row because I don't know how many DIVs will be on each row.

ondoho · 06-30-2022, 02:20 AM

You really need to look at all the rules that apply to your divs and parent element, e.g. with your browser developer tool.

There are solutions to this; one is to make the divs fixed height/width.

Have you searched for solutions? The stack* sites have tons of html/css stuff.

I also think you might want to look closer at flex - it might provide more flexible solutions.

mfoley · 06-30-2022, 06:00 AM

Quote:

Originally Posted by ondoho

You really need to look at all the rules that apply to your divs and parent element, e.g. with your browser developer tool.

There are solutions to this; one is to make the divs fixed height/width.

Have you searched for solutions? The stack* sites have tons of html/css stuff.

I also think you might want to look closer at flex - it might provide more flexible solutions.

I did try flex-wrap as well as various overflow options. None of that worked. I do make the divs a fixed width, but cannot do so with the height.

What does appear to work is changing the "float: left" to "display: inline-block; vertical-align: top". Part of that (apparent) solution was from a stack* site.

boughtonp · 06-30-2022, 07:38 AM

Yep, display:inline-block frequently works better than floating.

Also, depending on why that div is longer, setting a fixed height with overflow:auto to get scrollbars can sometimes be a valid solution.

Or using some form of logic to truncate and suffix long captions with "..." with the full text displayed on hover.