Margin Collapse solution for web design

This was a helpful tip I discovered when trying to design a page for a friend. I did not come up with this, but since it was so buried in the search results I thought I would share it with the rest of your. If you have a set of Div containers that you are using to organize a page, once the page is rendered in a browser sometimes you get spaces between the

containers. The problem is you designed them with the intentions of them touching to create a single form. It seems to be a common problem, but it most do not understand why this happens. This issue could be considered a bug in the whole html/css system, that still needs to be addressed. Even the dreamweaver template lists this issue as a note that its state is unexplainable.

zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs.    

In my early searches I discovered using float resolved this issue.
float: left;
The problem is that it created a whole new issue. It caused the container to float over the elements and prevent the links and text from being selected.

After lots of searching I found this great page which resolved both issues.
Instead of using float in my center container, I was able to use padding in its place and it resolved both problems.
padding-top: 1px;
padding-bottom: 1px;

It was a great simple fix. If you want to read more about go to Minz Meyer's site. http://www.researchkitchen.de/