How come css changes a div when I add a block-styled element inside it?

Question

When I remove the display:block from a p inside a div, it ignores the top-margin or it's own hight or something like that. It snuggles up right next to the element above it. Does anyone know why?

The div is floated, the element above is not.

Answer 1

Inline elements simply don't take vertical margins or height into account. Block elements do.

Edit:

In response to comments, it looks like there are two issues at play here.

1. You have two elements with id='generals'. Change this to class='generals'.
2. Add overflow: hidden to your generals style. All of the elements inside it are floated, and so don't apply to the height of the element. Adding overflow: hidden changes how the element is displayed, clearing all the floats inside it.