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

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