Question

I have the following HTML code:

    <section id="content" class="grid_9">
      <div class="block-content grey-bg">
        <div class="container_12">
            <section class="grid_6 aa">
                ... lots of content ...
            </section>
            <section class="grid_6 aa">
                ... some content ...
            </section>
        </div>
      </div>
    </section>

When I look in the browser there is a grey background because of my grey-bg class but it doesn’t enclose the two grid_6 sections. Actually it acts like there’s nothing inside it at all. The area of the teo grid_6 sections overflows out below the grey background. Can someone tell me what I am doing wrong. Sorry I forget to mention I am using the 960 grid system. Thank you.

Answer 1

You need to make sure that your <div class="block-content grey-bg"> contains all of its floats. 960.gs does this by applying a “clearfix” on its container_# classes. If you need other elements to have this same behavior, you can manually apply 960.gs’s clearfix class to that element:

<div class="block-content grey-bg clearfix">