Why background on section element does not show (height 0)?
i noticed that in the followi开发者_运维技巧ng 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 -->
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.
i found the answer, grid_x
has float: left
i need to clear it
精彩评论