[BP #3862] Basic Grid Stuff not working?

[Veloz]

Hi there
I'm new to BluePrint and must be overlooking something obvious. In
this grid:

<div class="container showgrid">
<!-- "row1" -->
<div class="span-24 last"> Header </div>

<!-- "row2" -->
<div class="span-4"> sidebar </div>
<div class="span-20 last"> Content </div>

<!-- "row3" -->
<div class="span-12">Left footer area</div>
<div class="span-12 last"> Right footer area </div>
</div>

Does not always display as expected. It seems like the placement of my
two column-12's (making up "row3") depends on the length of what's in
my span-4, which surprises me.

I.e., if the content in the span-4 is doesn't wrap (it contains
something like "sidebar", which fits into 4 cols wihtout wrapping)
then everything works as expected.. the two span-12's end up on a
separate line at the bottom of everything else, as follows:

Header
sidebar Content
Left footer
area
Right footer area


However, if the content of the span-4 is long enough to cause a line
wrap (say it contains "this is a line long enough to wrarp"), then one
or both of the span-12's are not in a separate row at the bottom of
everything else, they appear to the right of the span4, as follows:


Header
this is a line long Content
enough to warp Left footer area
Right footer area

If I add "clear" to my first span-12 (first column of row 3) then
everything lines up as expected.

What am I missing? Must I use "clear's" all over the place to make
sure each rows ends up in its own "row" and doesn't end up somewhere
else?

Thanks!
Michael

--
You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
To post to this group, send email to bluepr...@googlegroups.com.
To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.

[Sunny Beach]

I looked at this for a bit yesterday and am not sure I fully understand the problem/question.

If the question is how to keep the "rows" together, I would recommend wrapping each in a "span-24". You also don't need the "last" for a "span-24".

For example:

<div class="container showgrid">
       <!-- "row1" -->

       <div class="span-24"> Header </div>

       <!-- "row2" -->
       <div class="span-24">

              <div class="span-4"> sidebar  </div>
              <div class="span-20 last"> Content </div>
       </div>
       <!-- "row3" -->

       <div class="span-24">

              <div class="span-12">Left footer area</div>
              <div class="span-12 last"> Right footer area </div>
       </div>

</div>

[Veloz]

Yes, that's a good way to put it.. I wanted to keep the "rows"
together.

I expected that every grouping of <div class="span_x"> that added up
to 24 would be in the same row in the browser. Isn't that part of the
point of a "grid"? In other words


<div class="span-12" /><div class="span-12 last" /
> ... these two columns show be on the
same "row
<div class="span-8" /><div class="span-8" /> <div class="span-8 last" /
> ... these three columns show be on the same "row

etc.

And this expectation holds most of the time, but it seems if you have
a two column row, for example, and the first column is something small
like "span-4", following by something longer like "span-20", the two
columns don't always end up in the same row unless I have a "clear" on
the first column of the next row.

Your suggestion about putting each row in its own span-24 is probably
useful (thanks for the idea) but to me it says there's something not
quite right about BluePrint if that's required to get things to
display correctly.

Michael

> > blueprintcss...@googlegroups.com<blueprintcss%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/blueprintcss?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To post to this group, send email to bluepr...@googlegroups.com.
> To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.

> For more options, visit this group athttp://groups.google.com/group/blueprintcss?hl=en.

[Christian Montoya]

On Thu, Apr 22, 2010 at 10:42 AM, Veloz <michae...@gmail.com> wrote:
> Yes, that's a good way to put it.. I wanted to keep the "rows"
> together.
>
> I expected that every grouping of <div class="span_x"> that added up
> to 24 would be in the same row in the browser. Isn't that part of the
> point of a "grid"? In other words

I know i'm late to the party here, but I was wondering... these
problems you are seeing, are you seeing them in all browsers, or is it
just a particular browser?

--
--
Christian Montoya
mappdev.com :: christianmontoya.net