CODEWITHSUNDEEP
htmlcss
Philip
Philip

Reputation: 1078

margin-top does not work properly

I just can't find the issue with this script: http://jsfiddle.net/AKB3d/

#second {
  margin-top:50px;
  ...
}

I want the yellow box to be 50px below the top border of the right box, but whenever I add margin-top to the yellow box, the red box goes down, too. Why?

Upvotes: 0

Views: 82

Answers (2)

Binita Lama
Binita Lama

Reputation: 1278

Check this Working fiddle

#first {
margin:auto;
width:100px;
height:100px;
background:red;
overflow:hidden;
}

Upvotes: 1

James
James

Reputation: 4580

Give an overflow:hidden to the parent div, ie #first

This happens because of collapsing margins. Vertical margins disappear when parent is set to overflow:visible

Upvotes: 2

Related Questions