Using Vertical-Align with a Float

[realph]

I’m styling a table cell and am trying to use a vertical-align: middle; and float: left; at the same time. This doesn’t seem to be working, are there any workarounds?

table.checkout_cart tr.product_row td {

height: 31px;

float: left;

vertical-align: middle;

}

Thanks in advance!

[TheDoc]

Something doesn’t compute right for me here. Why are you trying to float a table cell?

[realph]

@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.

[TheDoc]

At first I couldn’t figure it out, but I think I’ve found your problem! I’m guessing you haven’t set 100% width on the table itself:

http://jsfiddle.net/NDFY3/2/

[realph]

@TheDoc That works, but now how to add the border-radius and padding without floating left?

http://jsfiddle.net/NDFY3/24/

[TheDoc]

I have a feeling that border-radius wont’ work on a table unless it has display: block

[realph]

@TheDoc When I add display: block I get back to same problem I was having before, the cells aren’t filling up the table row, even though the values assigned make up 100%.

http://jsfiddle.net/NDFY3/39/

[TheDoc]

You’ll need to apply it to the individual table cells: http://jsfiddle.net/NDFY3/40/

More: http://tympanus.net/Tutorials/CSS3Tables/

[realph]

@TheDoc Thanks for that. Do you know why my borders are ignoring the rounded corners?

http://jsfiddle.net/NDFY3/45/

[realph]

@TheDoc Looking at that link you provided, adding border-collapse: separate; to the table seems to have done the trick. Am I using that property correctly?

http://jsfiddle.net/NDFY3/51/

[TheDoc]

Honestly, I have nary a clue! If it’s working then I’d stick with it!

[realph]

@TheDoc Haha, I can live with that, thanks for all the help once again!

[Author]

Posts