960 grid border confusion.

Question

I'm hoping this is something simple and just my inexperience with css. I'm simply trying to add a single pixel border to a group of nested divs.

<div class="grid_11 suffix_1">
  <div class="borderupdown">
    <div class="grid_1 alpha">
      <p>RNK</p>
    </div>
    <div class="grid_1">
      <p>IQ</p>
    </div>
    <div class="grid_8 omega">
      <div class="grid_8 alpha">
        <p>title<p>
      </div>
      <div class="clear"></div>
      <div class="grid_8 omega">
        <p>comments stuff here</p>
      </div>
    </div>
  </div>
</div>

Here is the borderupdown css

.borderupdown
{
    border-top:1px solid red;
    border-bottom:1px solid red;
    margin-bottom:2px;
}

The class borderupdown is simply a 1px border top and bottom. My "understanding" is that since the other divs are nested under that class it should create a 1px border top and bottom of all of that. Instead I get both borders showing up visually on top with the 2px margin between them. I'm totally confused as to why. ( In case it matters I'm using a fluid version of the 960 grid system.)

Thank you.

Answer 1

It sounds like you've stumbled onto the issue where elements floated within a container aren't included in the dimensionality of the container. (I'm sure other folks have a better way of wording that...). Floated elements are not included in the calculation of the dimensions of any container by default. What you're looking for is called a "clearfix". Check out this post for a very nice, detailed list of fixes: What methods of ‘clearfix’ can I use?