Positioning a div in grid 960 is adding mystery padding / margin

Question

Browsers tested in: Chrome, IE, Firefox. Problem is that BusinessNav ID keeps getting pushed over 3 columns.

Here's what I want the page to look like http://www.designobvio.us/dov2/Homepage1.pdf

I definably can hack this code to make the positioning work. But as you can see theres still so much more page left. If I start hacking now it's definably going to get progressively more ugly.

First here's the site: http://designobvio.us/dov2/index.html (I've highlighted potential problem areas)

CSS styles: search /*User Styles */ (there are only a few)

heres the low down:

  <div id="businessNav" class="grid_3 ">
   <h2>Relationship</h2>
   <h2>Wages</h2>
   <h2>Common Sense</h2>
   <h2>Forward Thinker</h2>
   <h2>Learning</h2>
  </div>

this chunk of code is being afflicted by:

  <div id="heresWhy" class="grid_3">
   <h1>And Here's Why</h1>
   <p>...<p> 
  </div>

Or

<div id="headerBusiness" class="grid_6">
  <h1>Business</h1>
</div>

Anyone see the discrepancy in my code? Thanks everyone

Answer 1

Because height of "Hereswhy" is 362px, while your "headerBusiness" is just 360px, so your "BusinessNav" cannot float to the left.

once you give "Hereswhy" and "headerBusiness" the same height, like 362px, it would give u what you want