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].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
