HTML5 CSS对齐问题

Question

A link to my page: My Page

For debugging purposes I have set CSS background colors for the 3 sections of my page. The "Zine" should have background of red, the "Book Cover" should have a background of "green", and the "Magazine" at the end should be "Yellow".

For some reason the background of red is only getting applied to a very small portion of the "Zine" section, all the images and text in the Zine section should have background red but most of it is coming up green.

Also if you notice this is on a 960 grid layout, and in the Book section (which should be green background) I have a h1 Book Jacket> tag, which you will actually see the text Book Jacket on the outside of the 960 grid (right side of page to the top right of the image of David Carson)

---

Edit: Found solution:

I changed the following code:

<article class="container_12">
  <section class="zine">

To:

<article>
  <section class="container_12 zine">

I think this fix works because the section class "zine" wraps the entire contents of what should have been red background. This eliminates need for a clear fix, however the clearfix suggested by others also works.

Answer 1

The height of .zine is collapsing. This happens because it contains floated elements which aren't cleared. There are quite a few methods of clearing floats. I'd recommend using one (or both) of the following two methods:

1. The "clearfix hack" . Simply add the CSS rules from this page to your CSS docuement and add the class "cf" (or whatever) in addition to the class "zine".
2. Or, overflow: hidden . Basically, just add overflow: hidden to the "zine"-element.

---

Edit:

As you found out yourself, since you use the 960 grid, the container_12 and container_16 -elements have clearfix built-into them. Adding either of those class names to the wrapping elements does the same thing as I explained above.

Answer 2

You should use the grid_X classes (X is a number between 1 and 12), when you use 960.gs . and you should add a .clear after every "row".

You should take a look at 960.gs 's source and see how they use it. That's a really good overview.