Thanks for the tips.
I maybe wasn't explaining myself completely.
I know where the extra space comes from. It's due to me nesting span-x
containers.
div .span-24
div .span-10
div .span-14
span-24 and span-10 each have a bottom margin. So, visually, I've
doubled the bottom margin of that row of items.
The fix I came up with was to create my own 'row container':
div .row
div .span-10
div .span-14
This works fine. I just wanted to check to see I wasn't using
something that's already been figured into blueprint.
-Darrel
On Oct 22, 9:00 pm, "G. D. Speer" <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
