Why background on section element does not show (height 0)?

Question

i noticed that in the following example, note the classes, i am using 960gs in case the classes css interfered

html

<section id="main" class="container_12">
  <div class="grid_12">
    <article>
    ...

css

header, footer, section, article, nav, aside { display: block; }
#main { background: #fff; }

i noticed that #main has a height of 0 in firebug. also if i do a

#main .grid_12 { background: #fff; } 

it works

i noticed that if i use a div instead of section the css works

UPDATE

turns out that its because of the div.grid_12 or rather div.grid_x that causes the problem, if i remove that <div> it will work even if i am using <section>

<section id="main" class="container_12">
  <div class="grid_10"> <!-- <<< this div -->

Answer 1

From the spec:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Answer 2

i found the answer, grid_x has float: left i need to clear it