CODEWITHSUNDEEP
csshtml
giannis christofakis
giannis christofakis

Reputation: 8321

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

Upvotes: 0

Views: 1424

Answers (2)

newtron
newtron

Reputation: 6114

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.

Upvotes: 0

entropid
entropid

Reputation: 6239

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.

Upvotes: 1

Related Questions