I'm having a hard time getting the left and right sides of my regions and zones to line up. The attached image best explains the problem. My menu zone extends out beyond beyond the branding zone, and the right edge of the right sidebar region of the content zone does not line up with either the branding zone or the menu zone.

All zones are set to 12 column, and the regions within the zones are all set to use the number of columns of a 12 column grid to add up to the total of 12 columns.

The grid system is set to fluid and "responsive" is turned off for now. The 12-column menu zone has a 9-column menu region and a 3-column search region.

I can't figure out what is causing this misalignment; the attached image was taken from Firefox 8, but the problem appears the same in IE 8, Chrome, and Safari.

Actually, this problem caused me to think of another issue. I've set this grid to "fluid," and yet I've got those huge right and left margins which are totally lost, wasted space. Assuming that I can get the above problem fixed (or perhaps as a part of the fix), how can I reduce that wasted space?

CommentFileSizeAuthor
Zone Misalignment.png160.54 KBLarryTX
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ANDiTKO’s picture

ANDiTKO CreditAttribution: ANDiTKO commented

Padding maybe? Can you upload html version of what you are seeing so i can inspect it with firebug?

Cellar Door’s picture

Cellar Door CreditAttribution: Cellar Door commented

I think what's going on here is the zone has some custom css on it that is removing the margins of the others. Make sure when you edit the padding of a zone that it is done in the inner portions and not the main zone etc., otherwise you'll override the grid and cause the misalignment.

As for the wasted space you can probably get rid of this by creating a custom grid that has the margins you'd like on it, I haven't played much w/ the fluid grids but they should act similar to the non-fluid ones.