If you have a div lets say 500px*200px and you want to center another div(480px*180px) inside it and you want to set all margins (top, right, bottom, left) equal (margin:10px;).
How do you do it? If we give margin-top/padding-top to the inner div it brings the whole container down(which we dont want) but still doesn’t get centered.
I do it by either of these ways:
1- Give a 1px border-top to the outer div of same color(div backgd color) and then give margin-top to the inner div.
like this http://codepen.io/ghafirsayed/pen/hjxaH
2. Give position relative to the outerdiv and set the inner div by giving it position absolute.
I m sure people must be doing better than this . What do you do to handle such situtations.
You could have given `#banner` it’s own block formatting context by setting `overflow: hidden;` or `display: inline-block;`, that would prevent margin-collapsing from `#banner_inner` to `#banner`. For future reference when setting padding on parent is not possible ;)