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

[Splitintwo]

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

}

[Alen]

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)

[Splitintwo]

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?

[Alen]

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

[Splitintwo]

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.

[wolfcry911]

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

[Splitintwo]

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.

[Author]

Posts