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?

Answers


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


Check this Working fiddle

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

Need Your Help

How can I clear input text in bootstrap -UPDATED

javascript jquery twitter-bootstrap twitter-bootstrap-3

I have a simple modal in bootstrap 3.0.2 and it has a 2 simple input type="text" I would like to clear it. I have seen example but they are for bootstrap 2 and don't work with my modal. Does any on...

How do I get the id of a newly created created node from data.args?

javascript jquery jstree

I would like to display a fancybox when a user clicks the Create button to have them fill in a form. This is used to capture additional data and associate it with the newly created node in jsTree....