CSS Margin Doesn't Work Correctly

<style type="text/css">
     .header
         {
            background-color: #000000;
            margin-bottom: 10px;
         }

         .body
         {
     开发者_开发技巧       background-color: #FFFFFF;
            margin-bottom: 10px;
         }

         .footer
         {
            background-color: #000000;
         }

         .body #content
         {
            width: 80%;
            min-height: 500px;
            float: left;
            background-color: red;
         }

         .body #menu
         {
            width: 20%;
            min-height: 500px;
            float: right;
        background-color: blue;
         }
      </style>

The above code works but the "margin-bottom" property doesn't create space at the bottom of the body div. Why is that so?

Try overflow-y: auto on the .body selector. Should then recognise the height of the floats.

Here is a jsfiddle that shows the border: http://jsfiddle.net/PDk7b/

The styles that I added are:

.body { background-color: #FFFFFF; margin-bottom: 10px; min-height: 500px; display: block; }

Hope that helps.

Bob

The technical answer to your question likely depends upon which browser you're using. In one browser, the answer might be that Fred forgot to implement it and no testing caught it. Another browser might have an answer that the project manager didn't find the issue to be significant enough to fix yet.

If you're dealing with CSS and browsers in any meaningful way, you just have to get used to all the quirks. Some browsers require weird contortions to do a specific task right, while another browser requires none whatsoever. Then, on another task, the roles reverse.