Misbehaving margins

Question

Or maybe it's the height acting up. Anyway, I have a list composed of divs inside a containing div, and I'm using margins to position them vertically they way I'd like. Everything works fine, except for the last item in the list. The bottom extends all the way to the bottom of the container. I've tried various padding and margin fixes, and several of the results have been even further off of the intent (the goal is basically to have the bottom symmetrical to the top, with a gap between the last item and the bottom of the container).

An example, including all of the relevant CSS and HTML, is here.

The target browser is Internet Explorer 8.

Answer 1

To elaborate on @Niko 's answer

This means you'll have the equivalent of:

margin-top:6%;
margin-bottom:6%;

On each .ListItem. 'Margin collapsing' ensures that when margins are touching each other the smaller one is 'collapsed' or effectively removed. This means you will not have doubled up margins on the boxes.

Additionally, you could insert   before the closing tag of the containing div. This will insert a non-breaking space below the last list item.

Answer 2

http://jsfiddle.net/BcEKJ/1/

I added simple padding-bottom: 6%; to #ListContainer.

Answer 3

Use margin: 6% 0; on .ListItem to resolve that problem (adds extra margin to the bottom).