Keep inline product name

HTML & CSS
,
5

If your images are all the same height then Paul’s suggestion should work.

Without a link to your site or live page we are just getting a glimpse of only one <div class="product-feature">. It shows some inline styles setting width on the product-image-container and dimensions for the img.

Are all the other product-feature divs styled the same way?

Using inline-table I was able to come up with a product-caption that allows for two lines of text for the product name. Then it keeps the brand names and prices lined up too.
It will also allow for some different image sizes and let you align them at top, middle, or bottom.

As seen here …

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Product Caption</title>

<style>
.product {
    display: inline-table;
    vertical-align: top;
    width: 250px;
    height: 315px; /* controls the space of the .name div*/
    margin: 10px;
    border: 1px solid;
    background: #fff;
}
.image,.name,.brand,.price {
    display: table-row;
    text-align: center;
}
.product span {
    display: block;
    padding: 4px;
}

.image {
    height: 200px;
    text-align: center;
    word-spacing: -1em;
}
    .image::before,
    .image img {
        display: inline-block;
        vertical-align: middle; /* or 'top' or 'bottom' */
    }
    .image::before {
        content:"";
        height: 200px;
        width: 0;
    }
    .image img {
        margin: 0 auto;
        background: lime;
        word-spacing: normal; /* reset for img alt text */
    }

    img.sml {width: 140px; height: 140px} /*testing with mixed img sizes*/
    img.med {width: 160px; height: 160px}
    img.lrg {width: 180px; height: 180px}

.name { /*allows for wrapping text without a table min-height*/
    background: wheat;
}
    .name span {
        padding: 10px 5px 5px;
        font-weight: 700;
    }
.brand, .price {
    height: 1px;
}
    .price span {
        padding: 4px;
        background: yellow;
    }

</style>
</head>

<body>

<div class="product">
    <div class="image">
        <img class="sml" width="140" height="140" alt="Image Alt Text">
    </div>
    <div class="name">
        <span>Product Name Long</span>
    </div>
    <div class="brand">
        <span>Product Brand</span>
    </div>
    <div class="price">
        <span>&#036;100.00</span>
    </div>
</div>
<div class="product">
    <div class="image">
        <img class="lrg" width="180" height="180" alt="Image Alt Text">
    </div>
    <div class="name">
        <span>Product Name Longer Product Name Wraps</span>
    </div>
    <div class="brand">
        <span>Product Brand</span>
    </div>
    <div class="price">
        <span>&#036;200.00</span>
    </div>
</div>
<div class="product">
    <div class="image">
        <img class="med" width="160" height="160" alt="Image Alt Text">
    </div>
    <div class="name">
        <span>Product Name</span>
    </div>
    <div class="brand">
        <span>Product Brand</span>
    </div>
    <div class="price">
        <span>&#036;100.00</span>
    </div>
</div>
</body>
</html>
4 Likes