Support for equal height multicolumn layouts
Daniel Peraza
blueprint code:
.equal-height
{
overflow:hidden;
}
.equal-height > div {
padding-bottom:32767px;
margin-bottom:-32767px;
}
Thus, if we have the following code:
<div class="container equal-height">
<div class="column span-4">
<p>This is the sidebar</p>
</div>
<div class="column span-16">
<p>Here goes the main content</p>
</div>
<div class="column span-4 last">
<p>This is the right column</p>
</div>
</div>
We may achieve equal height multicolumn layouts. What do you think?
Sean K. Stewart
Smooth trick!! I like it a lot, but it seems limited. Not only limited
in height (where did you come up with the number 32767?), but also
cross browser? Which I think would hinder the inclusion into
Blueprint.
Do you have any more resources for using this technique? I want to
learn more about how you came to this solution. Thanks
Daniel Peraza
> Hey Daniel,
>
> Smooth trick!! I like it a lot, but it seems limited. Not only limited
> in height (where did you come up with the number 32767?), but also
> cross browser? Which I think would hinder the inclusion into
> Blueprint.
>
32767 is the biggest signed integer a computer can store with 16 bits.
It doesn't have to be this way, it is just meant to be a representation
of an unbounded or infinitum length.
> Do you have any more resources for using this technique? I want to
> learn more about how you came to this solution. Thanks
>
This is just a technique I've been using a lot since the first time I
read this article:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
So far, I haven't had any cross-browser problems.
Sean K. Stewart
Have you been to the positioniseverything.com article lately? The
first thing I notice on the page is this:
"Several problems have been found with this technique since
publication. Those problems are discussed in Appendix J [http://
www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems]"
Still a very cool technique. Thanks for sharing. Not sure it would be
good to add to a stable CSS framework such as Blueprint.
--
Sean K. Stewart
Christian Montoya
> Daniel,
>
> Have you been to the positioniseverything.com article lately? The
> first thing I notice on the page is this:
> "Several problems have been found with this technique since
> publication. Those problems are discussed in Appendix J [http://
> www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems]"
>
> Still a very cool technique. Thanks for sharing. Not sure it would be
> good to add to a stable CSS framework such as Blueprint.
>
And with that, I'll share the magic word: plugin! This could be a
plugin. The truth is there are at least a few ways to achieve the look
of equal-height columns, and none better than the others, so we can't
put any one method into the Blueprint core, but if you want to make a
plugin that will be included in the Blueprint "family" on Github, you
are more than welcome to.
--
--
Christian Montoya
mappdev.com :: christianmontoya.net
kaiser
> plugin. The truth is there are at least a few ways to achieve the look
> of equal-height columns, and none better than the others, so we can't
> put any one method into the Blueprint core, but if you want to make a
> plugin that will be included in the Blueprint "family" on Github, you
> are more than welcome to.
through the article Sean postet, then you'll come to the conclusion,
that there are more than just one or two problems. At least there are
even a few, where no workaround is possible. I would stick with the
recommendation to wrap rows in dev elements. Those wouldn't break as
long as [the first and the last element together doesn't share a less
or equal height with another element in that row] (if this was correct
english).
Daniel Peraza
I understand your point, but still a similar technique may be shipped through a plug in that states its limitations clearly, so blueprint's core code would not be compromised, unless someone really wants to use that plug in being already aware of what it implies.
Still we would need to find the right work arounds. But I think I can collaborate by googling a bit more on this.
"Sean K. Stewart" <spee...@gmail.com> escribió:
>Daniel,
>
>Have you been to the positioniseverything.com article lately? The
>first thing I notice on the page is this:
>"Several problems have been found with this technique since
>publication. Those problems are discussed in Appendix J [http://
>www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems]"
>
>Still a very cool technique. Thanks for sharing. Not sure it would be
>good to add to a stable CSS framework such as Blueprint.
>
>--
>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.
>
Stuardo -StR- Rodríguez
speedunk
Enjoy
--
Sean K. Stewart
www.seankstewart.com