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?

Answer 1

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 div s. Which is why you're having to add 30px .

Simply add this to your sidebar-bottom :

padding: 0px 15px;

Answer 2

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/

Answer 3

.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 :)*/
}