Fusion generates numerous nested divs, and I find it very hard to figure out how to use them correctly. Usually there is a *-wrapper div outside, and a *-inner div inside.

Example: I want to add space between the footer and the content. Fusion gives me three classes (plus three ids): .foooter-wrapper, .foooter, and .foooter-inner. Adding something like {padding-top: 1em;} works for all three classes, but what is the right class to use for what purpose?

Comments

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

The reason there are so many divs for these wrapping and inner elements is sometimes you want to add a background color/image to the wrapping div and have it be 100% wide and other times you want to add a background color/image to the inner div and not span 100% wide. And the padding on the elements are all individual too since you might want a padding on the inner if a background is on the wrapper. Or a padding on the content if a background is on the inner.

Wrapper = outside div, wrapping the entire element
Inner = inner div which is usually as wide as the page layout (960px-10px on each side)

For your case with adding some space in between the content and the footer I would actually apply some bottom margin to the wrapping div for the content above the footer. I think that would apply to the #main or #main-wrapper depending on your theme.. always try to add the spacing on the div on top of the element you want to space out. That's a preference of course but you can do it your way as needed, it's just easier to manage elements on top of each other rather than add padding to the footer in this instance.

Hope that clears things up a bit.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.