Encapsulating a sequence of grids in a parent div to control height while using grid960

Question

Browsers I'm using for testing: IE, Chrome, FF;

Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf

Heres the link to the direct page http://designobvio.us/dov2/index.html

While Grid systems are excellent for laying out by width, I always stumble when using height constants.

Inside my code I have 2 major problems:

1. Ideally, I want to be encapsulate sections of my code by using parent div that controls the height, margin-top. I've tried to create this div colored a pale green and padded it for visuals.

this class is shown here:

siteBody #businessSection{ padding-bottom:200px; background:#0F9;}

I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf

While trying to do this I've come up completely empty handed.

2.So next, I tried breaking down each section individually by using a class .businessInfo

#siteBody .businessInfo{height:200px; background:#ccc;}

Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.

I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.

If I'm missing anything I'll response ASAP.

Thanks!

Answer 1

this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/

you can use clear attribute for solve problem.

Solution:

http://jsfiddle.net/qeDs3/

This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.