Grow your CSS skills. Land your dream job.

Identical CSS. Different Results (Borders within a Grid System)

  • # May 9, 2013 at 5:56 pm

    Hi all,

    I don’t normally post code problems because after a couple hours I work them out. This has me stumped.

    I’m building a layout for a website. I’m using the 960 grid system with 16 columns. The 960 boxes were slightly smaller than I wanted and I wanted a border sitting on parts of the boxes.

    So I removed the 10px margin that sits either side of each container and replaced it with padding of 10pxs.

    If I want a border, then I set the border on the same side to 9px’s and add a 1px border.

    Slightly clumsy but it works for my design.

    http://codepen.io/anon/pen/Dqjzc

    The HTML is fairly simple. There’s a fixed header and bunch of containers below it.

    The CSS file is huge because the first 455 lines are a 960 16 column grid. You can ignore that (I think).

    The problems are line 534 downwards the classes .paddingmargin and .rightborder are identical.

    However if you use .rightborder the code it knocks one of the divs down a level. Why?

    (The div below is the one I replaced)

    How can two identical pieces of code give different results?

    (right border was originally -

    .rightborder {

    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 9px;
    border-right: solid #6a6a6a 1px

    }

    # May 9, 2013 at 6:28 pm

    The box model – http://learnlayout.com/box-model.html
    The box-sizing – http://learnlayout.com/box-sizing.html

    > However if you use .rightborder the code it knocks one of the divs down a level. Why?

    I’m guessing with of the element + padding + margin exceeds the width of the container. (see box-sizing above for solution)

    # May 9, 2013 at 7:10 pm

    That’s what’s weird though. I’ve zeroed the margins in both, and replaced them with padding. I’m using exactly the same pieces of CSS but when I switch one for another one pushes it down a level.

    These are the two classes I’m interchanging.

    .rightborder {

    margin-left: 0px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 10px;

    }

    .paddingmargin {

    margin-left: 0px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 10px;

    }

    Surely nothing should change?

    # May 9, 2013 at 7:23 pm

    Are you sure you’re not inheriting from another element… that could be causing issues. Can you provide us with working example?

    # May 10, 2013 at 12:31 pm

    I put it all in the code pen.

    http://codepen.io/anon/pen/Dqjzc

    The classes are line 534 downwards

    The place to change one for another is line 28 in the HTML.

    # May 10, 2013 at 1:17 pm

    .rightborder is listed twice in the css. The second one has the same declarations as .paddingmargin, but the first puts a 1px border on it. So there is a difference.

    # May 11, 2013 at 12:01 pm

    Thanks wolf. Reminds me of when everyone else can see the last word in a wordsearch and you cannot find that shit, no matter how long you look at it.

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

You must be logged in to reply to this topic.

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