Portfolio Gallery Images Broken Float - Too long caption?

Thanks Jason for your correct answer.

I have to admit, that I've been thinking about such sollution before, but couldn't recall how that pseudo-class was constructed :-) Everything works right now. However, I'm not 100% happy, as I would like to see all the elements in equal height (and still responsive). I know that this has to do something with "li" element within #gallery, because it stretches as long as the content pushes it down. Is there a way to make them all equally high and still responsive?

Cheers!

You want all <li><img/></li> elements to be the same height? Or you want those elements to have the same baseline (which in this case would rather be the TOPline, although I do not know if this word actually exists in this particular environment XD)

Yeah, I want all these alements to line-up and still be able to resize themselves according to window-resize for mobile devices.

I'd play with line-height, vertical-align to do that. The easiest solution is to go for the padding (or for the margin, which could be better given your case).

Just set a margin that goes to every single <li> element, and make it so that the distance is awarded by the longest\biggest element of the list. If you do it like that you'll create enought space (top\bottom) for the images\captions to take the needed space+the space they will fill for having the same height alignment.

try that out and lemme know!

Hi Adam,

It might help to know why you want this. Is it because of the background color on each list item? In other words, suppose you have one list item in that row whose caption has wrapped to 3 lines but all others in that row are two lines. Do you want the height of the shorter ones extended so that the background color extends down farther and they are all lined up along the bottom as well as the top?

I'm sorry, Lorenzo, but what you wrote is too much for my present skill as I don't know how to bite it :D Jason, that's exactly what I want. The baseline needs to be the same for all list items.

I've made a screen-shot for you, so it will be easier to understand. You can see, that they beautifly expand into two columns (as intended), but height of each list item element is not equal (this grey background):

http://oi61.tinypic.com/j7udle.jpg

From your pic I see you want to style the baseline, not the topline (which I thought you wanted to style!). To do that there are only 2 possibilities, given the geometry and shapes.

1st) Set the size of the images to be the same for every single image

2nd) Work with MARGIN \ PADDING declarations such as

li img p {
        /*Setting the padding to be the same for every single li*/
        padding : *somevalue*% || *somevalue*px etc etc
}

Otherwise you just set a fixed height for all the LI containers. There's no other way because the contained elements are differing in height, so the only ways are those said above.

Let me consider some solutions and I'll post here later.

Thanks for the answer, Lorenzo.

First sollution seems to be preety neat, but there is nothing more to show as this is just a caption. Second sollution makes the gallery look ugly when you resize window for mobile view - the height stays the same, creating long columns with empty spaces after captions text. Third sollution is unknown to me as I haven't acquainted myself with it yet.

So I'm still looking for some way out ;-)

This way you are fixing the width of the entire box. The solution is working but you are also limiting the responsiveness of the design. Better fix the dimensions of the single elements and let them move around resposivly and in a bigger environment!

Ok I see now,

Like this?

<a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="honey bee on a flower">
                <p class="hw">One of worker bees is not noticable but talkative, not talking with me</p>

p.hw {
  height: 250px;
  width: 150px;
}