Identical CSS. Different Results (Borders within a Grid System)
# May 9, 2013 at 5:56 pm
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.
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 –
border-right: solid #6a6a6a 1px
}# May 9, 2013 at 6:28 pm
> 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.
Surely nothing should change?
You must be logged in to reply to this topic.