Testing on the following browsers: Internet Explorer, Chrome, Firefox;
Check out this example of an ideal layout in a PDF:
Here is the link to the direct page:
While Grid systems work well for width layout, I struggle with setting height constants.
In my code, I encountered 2 major issues:
- Ideally, I want to group sections in my code using a parent div that controls the height and margin-top. I attempted to create this div with a pale green color and padding for visualization.
This code snippet showcases this:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I have also illustrated this concept in this image:
Despite my efforts, I was unsuccessful in achieving this.
2. Next, I attempted to separate each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately, this method did not work either, even though all grids align perfectly.
I hope the explanations above make sense. I prefer solution one, but if that's not possible, option two will suffice.
If I overlooked anything, I will respond promptly.
Thank you!