Content ignoring the Masthead

Question

I can't understand why my content and sidebar elements are ignoring the masthead and appearing over it. I haven't declared the position of masthead to absolute so they shouldn't be ignoring the masthead element.

http://jsfiddle.net/Ljzbd/

css

/* Body Declarations for the all elements */
body {
font: normal 62.5 "Lucida Grande", Verdana, sans-serif;
padding:0;
margin:0 auto 0 auto;
    width:760px;
}



/* masthead and descendants */
#masthead {
height:200px;
    background-color:red;
}

/* sidebar and descendants */
#sidebar {
  float:left;
  width:300px;
  background-color:blue;
}

/* content and descendants */
#content {
  float:right;
width:450px;
background-color:yellow;
margin-bottom:10px;
}

/* footer and descendants */
#footer {
    clear:both;
background-color:green;
}

Answer 1

I'm assuming your "masthead" is the red div. The reason why the content is appearing on top of the red element is because you did not end the div correctly (line 14 opens another div). Does this solve your problem?

<div id="masthead">
</div>

http://jsfiddle.net/ZLk7b/

Answer 2

In your example you are not closing the masthead element.