Question

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;
    font-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;
}

Answer 1

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.