Grow your CSS skills. Land your dream job.

Using Vertical-Align with a Float

  • # July 25, 2011 at 1:13 pm

    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!

    # July 25, 2011 at 1:17 pm

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

    # July 25, 2011 at 1:33 pm

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

    # July 25, 2011 at 1:39 pm

    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/

    # July 25, 2011 at 2:58 pm

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

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

    # July 25, 2011 at 4:02 pm

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

    # July 25, 2011 at 6:59 pm

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

    # July 25, 2011 at 7:10 pm

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

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

    # July 25, 2011 at 7:43 pm

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

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

    # July 25, 2011 at 7:48 pm

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

    # July 25, 2011 at 7:50 pm

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

    # July 25, 2011 at 7:55 pm

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".