Jhoon Bey Jhoon Bey - 1 month ago 5
CSS Question

How place elements in <td>?

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:

enter image description here

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

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.

Comments