Tips - 1) make sure you use 'last' on the last column as it shortens a row length to fit the 950px container instead of an extra gutter that adds up to 960px. The extra gutter could force a block element to wrap to the next row.
2) use a margin instead of a padding if you want to absorb vertical space (depending on background or border needs). In IE the bottom margin of one element and the top margin of the next element will "collapse" and become the greater of the two. This is both a feature and a bug (Google it) 3) You have complete control over padding and margin by overriding BP with settings of greater CSS specificity. Keep in mind that the built-in settings are designed to maintain a vertical rhythm of 18px and you may or may not care about that. If you are getting a 36px or 54px gap, look for errors or extra markup. 4) Further to 3 - if using a CMS - check your html as rendered (view source) - see if there are any extra tags like <p> </p> or <br /> at the end of the longest column - some forms of TinyMCL and similar editors leave gifts behind. 5) Use Firefox, Web devloper Tools - Rt-Click on a column - Inspect Element and see if you are getting unexpected CSS whitespace in the Layout window. ----- Original Message ----- From: "da" <[email protected]> To: "Blueprint CSS" <[email protected]> Sent: Thursday, October 22, 2009 4:49 PM Subject: [BP #3500] Controlling vertical margin (margin-bottom) in horizontal-centric layouts? > > OK, that subject line is kind of confusing. > > I've been working with BluePrint for a month or so not trying to see > if it's a good framework for developing Web App interfaces. > > One thing I've run into is that it seems easy to end up with too much > vertical padding between rows. > > A specific example is if I need to layout rows of items where internal > columns might be different heights. To ensure that the next row's > columns fully clear I need to wrap the first row in another wrapper. > > So, I end up with something like this: > > div .span-24 > div .span-10 > div .span-14 > > They all have a bottom margin so I end up with what appears to be > 'double' bottom padding due to the nesting. > > I was wondering if anyone has come up with a system to handle this. > Right now this is what I'm using: > > div .row > div .span-10 > div .span-14 > > and the css: > > .row {width: 100%; overflow: auto;} > > That seems to work but thought I'd check in to make sure I'm not > overlooking an already-part-of-the-framework solution that > accomplishes the same thing. > > -DA > > > > -------------------------------------------------------------------------------- No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.5.423 / Virus Database: 270.14.26/2451 - Release Date: 10/22/09 08:51:00 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
