Positioning a row of buttons on the bottom right of a table cell

Discussion in 'CSS' started by NightOwl888, Mar 26, 2008.

  1. #1
    I am an experienced developer, but I have only dabbled a little in css and I was wondering if someone could give me some idea how to accomplish this task.

    Basically, I have a table of shopping cart items. Each item has a list of attributes that may number anywhere from 0 to infinity. The attributes are listed in the left column of the table.

    I am trying to position some buttons on the bottom right of each table row because there will never be anything in that spot on the row. I would like them to "float" in front of the table if possible so I can keep everything else as it is in the table behind. Here is a photoshop mockup of the way I would like it to look: http://www.shadstorhaug.com/ShoppingCart.gif.

    I have managed to use absolute positioning to do something similar to this, but the problem with this approach is that I don't know what the height of each row will be in advance and hard coding the rows to a set height defeats the purpose (which is trying to save space on the screen and make it more intuitive).

    Take a look at the image above and let me know if this is even possible. I circled the part that I am trying to recreate in HTML. I have been working on this for hours and can't seem to find a solution.

    TIA
     
    NightOwl888, Mar 26, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Use of the position property in tables wonky, because the relative value's effect is undefined*. If you think about it, position and tables are not exactly compatible concepts.

    The approach I would take is to make the left cell span two rows. On the right, make a second row that spans three columns.

    cheers,

    gary

    * http://www.w3.org/TR/CSS21/visuren.html#propdef-position
     
    kk5st, Mar 27, 2008 IP