CODEWITHSUNDEEP
htmlcss
srysry
srysry

Reputation: 173

Width issues with divs

I don't understand why the width of these two divs are different. My goal is to have margins at each side of the page. Furthermore i don't understand why there is more space at the left side than the right side when they should be equal.

http://jsfiddle.net/dazakip/u7d59901/2/

body {
  margin-left: 9%;
  margin-right: 9%;

}

.nav {
  float: left;
  width: 100%;
  height: 10px;
  padding-top: 3px;
  padding-bottom: 10px;
  background-color: green;
}

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
}

Upvotes: 0

Views: 41

Answers (4)

Sing2
Sing2

Reputation: 97

It's because you set the padding of .logo by 20px. So you will get more 20px width in the left and right of your .logo.

Try to remove it or add "box-sizing: border-box;" so your .logo width will not expand even if you give padding.

Upvotes: 1

pierrebeitz
pierrebeitz

Reputation: 221

Have a look at the box-sizing property which changes the behaviour of margins to a more intuitive way: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Upvotes: 1

cameronjonesweb
cameronjonesweb

Reputation: 2506

When you add padding, it adds it to the size, so your width of .logo is 100% + 40px. To fix this set the box sizing to border-box.

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
  box-sizing: border-box;
}

Upvotes: 1

vergilius
vergilius

Reputation: 390

you are missing box-sizing: border-box; on your div, paddings are increasing overall width there

Upvotes: 1

Related Questions