Problem with borders in product list

Discussion in 'CSS' started by chrille112, Apr 12, 2007.

  1. #1
    I want to make a product list, like this one:
    http://www.onoff.com/online/se/inet.nsf/vCategoryList/DVD_Video?opendocument&markID=15&reload=1

    BUT the site should have relative (100%) width, and the "product boxes" will have fixed size. That means, that how many boxes there will be on one row will depend on the screen resolution. Sometimes there will be 3 boxes in a row, and another time there will be more.

    What I'm looking for is the border design. I want it like this:

    
    product (border) product (border) product
    
    Code (markup):
    There should be no border in the beginning and in the end. If I knew what box would be the last, I could just:
    
    border-right: none; 
    
    Code (markup):
    But the floating design makes it impossible to decide what box will be the last.

    Any ideas how to solve this?
     
    chrille112, Apr 12, 2007 IP
  2. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #2
    you will never know the last, but you will alwys know the first :)

    add classes to your first element

    <div class="first">

    for example

    and then,

    div { border-left: 1px siolid #333; }
    div.first { border: none; }
     
    briansol, Apr 13, 2007 IP