How place elements in <td>?

Question

I have Products which has images in maximum 100px size. It means: width is 100px, height is small than 100px, or height is 100px, width is small than 100px. One side is always 100px.

I need to show product image on the right, name and price on the bottom left of that image. it is structure in different cases what I need:

I tried this:

<table style="width: 100%;">
    <tbody>
        <tr>
          <td style="height: 100px; ">
              <a href="@Url.Action("Details", "Product", new { id = Model.Id })" > 
                 <img src="@Url.Content("~/Images/" + Model.Image)" style="float:right;" alt="" />
                <b style="margin-top: 15%; float: right;">
                    <label>@Model.Price</label>
                    <br />
                    <label>@Model.Name</label>
                </b>
              </a>
          </td>
       </tr>
    </tbody>
</table>

But this work only for 100px height. margin-top: 15%; is static. When image height is 50px, 60px etc.. it should change. How can I do this? its not important to use a table. You can advice any elements to do this.

EDIT: I added one more <td> side by side and put price and name into first <td> and image into second <td>.

Now I need to set <td> width like inner element's size. If image width in <td> is 90px, to set <td> width to 90px. Is it possible?

Answer 1

As already mentioned using table is not the way you should do it. But you can use CSS to simulate something like a table, although I have to mention that this won't work in ie7 or below:

The CSS

.list li {
    height:100px;
    border:5px solid #000;
    margin-bottom:5px;
    width:100%;
    display:table;

}

.list li div {
    display:table-cell;
    vertical-align:middle;
    overflow:hidden;
}

.list li div a {
    display:table;
    width:100%;
}
.list li a span {
    display:table-cell;
    overflow:hidden;
    width:100%;
    vertical-align:bottom;
}

.list li a span b {
    display:block;
    padding-right:5px;
    float:right;
}

.list img {
    float:right;
}

The HTML

<ul class="list">
    <li>
        <div>
            <a href="#" > 
                <span>
                    <b>@Model.Pricexyz<br />@Model.Name</b>
                </span>
                <img src="http://placekitten.com/g/100/100" alt="" />
            </a>
        </div>
    </li>
    <!-- add other elements here -->
</ul>

You can find a demo here.

Answer 2

Here's what I came up with. Notice the dummy fields enclosed in brackets, change them to reflect your backend data.

Tables are no good because your columns can be of different widths. Your last scenario would require you to detect the height of the image or extract it (assuming you've saved it somewhere) and adding a class to the item container.

<style type="text/css">

    .products-container > .item {
        height: 100px;
    }

    .products-container > .item.image-height-60 {
        padding: 20px 0;
        height: 80px;
    }

    .products-container > .item > .column {
        float: right;
        height: 100px;
    }

    .products-container > .item > .column.info-column {
        position: relative;
    }

    .products-container > .item > .column.info-column > .inner {
        position: absolute;

        bottom: 0;
        right: 0;
    }

    .products-container img {
        /* dummy image dimensions */
        /*width: 60px;
        height: 100px;*/

        vertical-align: bottom;
    }

    .products-container .clear {
        clear: both;
    }
</style>

<div class="products-container">
    <div class="item">

        <!-- Image column comes first because it's pushed to the right using float: right -->
        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>

    <!-- Example where image is assumed to be 60 pixels tall. -->
    <!-- Notice I've added the class 'image-height-60' -->
    <div class="item image-height-60">

        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>
</div>