Why must CSS div be 30 extra pixels to be even with others?

Question

My issue:

CSS must include 30 extra pixels on a certain div in order for it to be even, I want to know why. Also, I would rather it be an even number with the other two divs instead of x+30.

My solution:

I simply add 30 pixels to the third div in order to make it even with the others.

Here is a jsFiddle.

Here is the three CSS I'm talking about:

.sidebar-top {
    float: left;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #ccc;
    height: 32px;
    width: 290px;
    background: -webkit-linear-gradient(top, white 0%,#E8E8E8 100%);
    background: linear-gradient(to bottom, white 0%,#E8E8E8 100%);
    padding: 4px 15px;
}
.sidebar-middle {
    float: left;
    width: 290px;
    padding: 5px 15px 0 15px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    background: #fff;
}
.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 320px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
}

My Question/tl;dr:

Why am I required to add 30 pixels to .sidebar-bottom in order to make it even with the other divs?

The others have 15 pixels of padding on both sides, and the third one has none. 15+15=30. — JJJ, Mar 10 '13 at 18:56
I know, I just eyed my CSS over once more after staring for hours and caught it, thanks! — grepsedawk, Mar 10 '13 at 18:58
possible duplicate of [Padding adds to div width / height?](http://stackoverflow.com/questions/4879788/padding-adds-to-div-width-height) — JJJ, Mar 10 '13 at 18:59
@Juhana, I didn't realize it was so simple: padding. Should I just delete the question, allow it to be closed, what? — grepsedawk, Mar 10 '13 at 19:01
Regardless, it asks and answers the question in a different manner. — grepsedawk, Mar 10 '13 at 19:05
@Juhana It's hard to call this a duplicate since it's a specific question relating to Pachnok's specific problem. It's only a duplicate if the person can go and look at the other question and find the exact answer. — Jace Cotton, Mar 10 '13 at 19:06
As well, it's talking about "Why is a div exactly 30 px shorter" which I couldn't find on google at all. I had no idea it was padding... — grepsedawk, Mar 10 '13 at 19:09

score 3 · Accepted Answer · edited Mar 10 '13 at 19:01

3

In short, it is because of the added padding onto each sidebar-top, and sidebar-middle.

Because you have a padding of 15px on the both sides of the other divs. Which is why you're having to add 30px.

Simply add this to your sidebar-bottom:

padding: 0px 15px;

edited Mar 10 '13 at 19:01

grepsedawk

3,324
2
26
49

answered Mar 10 '13 at 18:57

Jace Cotton

2,004
1
21
38

1

You can avoid this problem by using `box-sizing: border-box`. See http://paulirish.com/2012/box-sizing-border-box-ftw/ (Note that `border-box` doesn't work for IE < 8.) – jeradg Mar 10 '13 at 19:01
1

Who cares about IE<8? Hello 2013 :D – pzin Mar 10 '13 at 20:29
I know, I just redirect to a plaintext version of the site. :D – Jace Cotton Mar 10 '13 at 20:30

score 0 · Answer 2 · answered Mar 10 '13 at 19:00

For the two upper DIV you defined width 290px and you put padding 15px on each sides, box model considers the 290px as the inner width of the element.. so 15px are added to left and to right which make the element 320px not 290.. the third DIV is 290px and you didn't put any padding.. so you needed to add the 30px to the 290px.

This is one of the Box model problems, that you had to calibrate padding, borders to get the desired dimensions.

A solution would be to add padding to the third DIV..

.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 290px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/mkhoudary/E2JCm/1/

score 0 · Answer 3 · answered Sep 16 '15 at 17:21

.sidebar-top {
    width: 290px;
    padding: 4px 15px;
}

.sidebar-middle {
    width: 290px;
    padding: 5px 15px 0 15px;
}

    .sidebar-bottom {
        width: 320px;
        /*no padding for sidebar-bottom others having 
   width - 290px + 
   padding left 15px + 
   padding right 15px = totally 320px.To equate sidebar-bottom to match with other two divs you are giving width as 320px :)*/
}

Why must CSS div be 30 extra pixels to be even with others?

3 Answers3