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 On Apr 22, 12:37 pm, Sunny Beach <[email protected]> wrote: > 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> > > > > On Tue, Apr 20, 2010 at 3:39 PM, Veloz <[email protected]> wrote: > > 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 [email protected]. > > To unsubscribe from this group, send email to > > [email protected]<blueprintcss%[email protected]> > > . > > 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 [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group > athttp://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 [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.
