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: 
From the [spec](http://www.whatwg.org/specs/web-apps/current-work/#the-section-element):

> 
> 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.
> 
> 
>
i found the answer, `grid_x` has `float: left` i need to clear it