Grow your CSS skills. Land your dream job.

Double border issue

  • # July 13, 2008 at 12:27 am

    Obviously everyone has had to come across the issue of applying a border to say a number of floating divs. But the divs but up against each other, causing the inner borders to double (half from one side, and half from the other side).

    How do you handle this?

    # July 13, 2008 at 12:50 am

    you could put a margin of 5 or ten pixels on your divs so that they aren’t touching eachother. Or apply the borders only to the sides that you need. You can seperate them by doing this

    border-top:
    border-right:
    border-bottom:
    border-left:

    for a complete reference to the css rules. try looking at this site

    http://www.stylegala.com/features/css-reference/

    # July 15, 2008 at 2:00 pm
    "pghtech" wrote:
    Obviously everyone has had to come across the issue of applying a border to say a number of floating divs. But the divs but up against each other, causing the inner borders to double (half from one side, and half from the other side).

    How do you handle this?

    It’s pretty simple actually. Okay, so let’s say we have four divs up against each other:

    CSS:

    Code:
    div.box {
    float: left;
    height: 200px;
    width: 200px;
    }

    HTML:

    Code:
     
     
     
     

    What you want to do is apply a border to the top, right, and bottom sides of the divs, but not the left side. Instead, the right border of the first div will "create" the left border of the second one, since the two touch at the side (and this will continue down the line for the third and fourth, since they all share the same styles). So, here’s the CSS:

    Code:
    div.box {
    border-top: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    border-left: 0px solid red;
    float: left;
    height: 200px;
    width: 200px;
    }

    Now, the only problem is that the very first div won’t have a left border, because there’s nothing before it. To fix that, add the left border back in for the first div only:

    Code:
    div.box:first-child {
    border-left: 1px solid red;
    }

    :first-child doesn’t work in IE6, so you can add another line to your div.box { } declaration to fix that:

    Code:
    div.box {
    border-top: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    border-left: 0px solid red;
    border-left-width: expression(this.previousSibling==null?’1px’:’0px’);
    float: left;
    height: 200px;
    width: 200px;
    }

    There you go :)

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

You must be logged in to reply to this topic.

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