Side-by-side divs with different height

I have placed two divs next to each other, I have specified the same height for both but the second one appears to be higher than the first one. Why is this happening, they should have the same height but they aren't.

body {
    font-family: Arial, Helvetica, sans-serif;
    background : #CD8C95;
}
div {
    height:30em;
}
div#links {
    font-size:18px;
    fo开发者_开发技巧nt-family:Geneva, Arial, Helvetica, sans-serif;   
    background : #EEDD82;
    padding-top: 15%;
    padding-left: 10px;
    width : 12em;
    float:left;
}
div#content {
    padding-left: 5em;
    padding-top:10em;
    background:#FFA07A;
    float:left;
    width:20em;
}

As you can see in the W3C documentation, the actual dimensions of a box are produced by the height/width, plus the margins and paddings. Since you specified different margins/paddings for your divs, you have different actual heights.

Because of the different amount of padding, which is being calculated after the height. In other words, the height of div#links is 30em + 15%, and the height of div#content is 30em + 10em. See the W3C's box model documentation.

You could add a CSS box-sizing rule such as box-sizing: border-box or box-sizing: padding-box to fix this in browsers that support it.