The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using Vertical-Align with a Float Re: Using Vertical-Align with a Float


@TheDoc Haha, I have no idea. I’ve got six table cells in a row, and I’ve assigned each table cell a percentage width.

table.checkout_cart tr.product_row td.firstcol {
width: 11%;
background: red;

table.checkout_cart tr.product_row td.wpsc_product_name {
width: 40%;
background-color: green;

table.checkout_cart tr.product_row td.wpsc_product_quantity {
width: 14%;
background-color: blue;

table.checkout_cart tr.product_row td.wpsc_single_price {
width: 11%;
background-color: lime;

table.checkout_cart tr.product_row td.wpsc_product_price {
width: 11%;
background-color: aqua;

table.checkout_cart tr.product_row td.wpsc_product_remove {
width: 13%;
background-color: red;

The problem is, the combined total of these widths make up 100%, so why aren’t my cells filling up this table row? (see below)

The only way I can remedy this is by assigning a float: left; to my table cells, by doing that though I lose my vertical-align.

Clearly I’m doing something wrong, any help would be appreciated. I hope it makes sense what I’m trying to do. Thanks.