HTML CSS move text upwards when the line breaks

Question

I have this li that repeats dynamically, being aligned in 3 columns and various rows.

<li class="produto-ind">

            <h2>
                Lorem ipsum dolor sit amet
            </h2>

            <div class="img-produto-ind">
                <div class="fk-img"></div>
            </div>

</li>

The text in the h3 is not always the same and that is the problem.

Check this out:

http://jsfiddle.net/2vpMP/1/

As you can see, the first li have more text than the other ones. As the lines of the text break, it forces the div.fk-img to go down, messing up the alignment.

My question is: Is it possible to make the text move upwards if there is line breaks?

Answer 1

Using inline blocks

You might try this:

.produto-ind {
    xxposition: relative;
    width:300px;
    height:400px;
    xxfloat: left;
    margin:50px 30px 0px 0px;
    border: 1px dotted blue;
    display: inline-block;
}

Instead of using floats, use display: inline-block. The text blocks will align with their bottom baselines.

There are other minor issues related to the height of the div's but those can be fixed, especially if you know the height for .fk-img.

See demo at http://jsfiddle.net/audetwebdesign/2vpMP/12/

Using floats

You can also use floats if you know the height of your image container:

.produto-ind .img-produto-ind {
    height:290px;
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.produto-ind h2 {
    background-color: yellow;
    position: absolute;
    bottom: 290px;
}
.produto-ind .fk-img {
    height:100%;
    width:auto;
    background-color:gray;
}

In this case, if you know that .fk-img will be 290px height, you can use absolute positioning to place the image container at the bottom of the parent .produto-img block and then position the h2 element 290px off the bottom.

See: http://jsfiddle.net/audetwebdesign/KpCzK/

The choice between inline-blocks and floats depends a lot on how you want the li blocks to line up, ragged space on top or ragged space on the bottom, and that is a design decision on you part.

A solution with display: table-cell is possible if you wrap your content around a block level element width display: table-cell; vertical-align: bottom; but that will also assume that all the image blocks have the same height.