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.