> To get a liquid layout version using Blueprint, check out the sample I
> made based on work some of us had been doing at Involution Studios for
> the past few months:

> http://www.designbyfire.com/liquid_blueprint/tests/liquid.html

> I'll be doing a write up on this example and how to achieve liquid
> layouts using Blueprint on my blog as soon as I get the time. I have
> spoken to Olav regarding this work, and he and the gang are checking
> it out. In the meantime, we also think it's a good idea to get you
> folks looking at it to see what you think and what pitfalls it has
> that would need to be addressed.

> I have yet to test this liquid approach extensively on IE6/7, but I
> know there are some issues. (See below.) Nor have I made all the
> adjustments needed to some of the base CSS files in Blueprint to make
> it bullet-proof.

> You'll have to pour through the XHTML of the example page and the
> liquid.css to see what I changed from grid.css:http://www.designbyfire.com/liquid_blueprint/blueprint/lib/liquid.css

> Or you can wait until I post about it on Design by Fire for all the
> specific details.

> The quick summary:

> I had to make three changes in order for Blueprint to work in liquid
> fashion: A) made the column span <div> styles use percentage values
> instead of pixels, B) added an extra <div> in front of and below each
> column, C) assigned "overlfow: hidden;" to the <div>s. In doing so,
> you get liquid layout.

> Basically, using "overflow: hidden;" on any wrapper or container <div>
> will prevent the column floats inside that column from breaking the
> layout. That's the main trick. Further, in using the extra <div> tags
> in the markup, it allows you to wrap content so there's no need to
> ever use "clear: both;" This is an important point, as using a "clear:
> both;" means the grid structure can never be nested in a larger page
> layout. For example, if you wanted to add a global sidebar, in the
> current Blueprint model, you'd have to make the sidebar part of the
> grid structure. This would prevent you from creating a sidebar like
> panel for a web application that lived on its own and was not part of
> the content or grid structure. (Think the sidebars in Google Mail or
> Google Maps.)

> So in effect, this change allows Blueprint to get a liquid approach
> and it also allows it to work as a component piece inside a larger
> page structure if need be.

> In reality, the only change needed by folks using Blueprint would be
> to use the liquid.css instead of grid.css and change your XHTML markup
> structure to look like:

> <div class="container">

>      <div class="block">
>           <div class="column span-24">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>      </div>

>      <hr />

>      <div class="block">
>           <div class="column span-12">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>           <div class="column span-12">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>      </div>

>      <div class="block">
>           <div class="column span-8">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>           <div class="column span-8">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>           <div class="column span-8">
>                <div>
>                     <!-- CONTENT GOES HERE -->
>                </div>
>           </div>
>      </div>

> <div>

> With this form of liquid layout, you get stretchy columns based on
> window width, but increasing the font size won't increase the column
> widths or otherwise break the layout. Generally speaking, this is the
> preferred behavior for liquid, I think. To get scaling liquid layout,
> you have to use em values instead of percentages. I'll do that later,
> but I find that form of liquid layout to not be very useful as there's
> no way to ever prevent wrapping if the user sets the browser font
> extremely large.

> With the stretch liquid model (of using % instead of px on the span
> styles), the container style has a few key things that can be done to
> it to control the overall layout behavior.

> .container {
>         min-width: 960px;
>         width: 80%;
>         margin: 0 auto;
>         padding: 0;
>         overflow: hidden;

> }

> The first is obvious in that changing the margin from an "em" value to
> "auto" creates centered layouts.

> The second thing is that to make a "fixed" width layout, like the
> current Blueprint model today, simply change the width from a
> percentage value to an em or pixel value. Now you can toggle the
> behavior of liquid or fixed pretty easily with only this one
> parameter. To the degree that creating custom grids that vary off a
> base 24 is probably not needed for the majority of web-based layout
> work.

> Base 12 or base 24 are very good grid numbers as they are divisible by
> so many smaller numbers. If you stick with Base 24, you can literally
> use the exact same liquid.css file with every project and only have to
> toggle the .container width value to switch from fixed to liquid
> layouts.

> Rounding Errors in Safari and IE6/7 with liquid layouts. This is the
> bad news.

> Given the model of making liquid requires using the same x/12 em math
> as the type settings, you'll quickly encounter rounding bugs in both
> Safari and IE6/7 using certain em values. It seems both Safari and
> IE6/7 have some weird logic that toggles rounding up or rounding down
> depending on some variable. The end result of this rounding math
> behavior is that the liquid approach screws both browsers up a little.
> (This is our best guess at the moment. We have to find people on the
> engineer teams of those project to verify this is indeed the problem.)
> Firefox does the right thing... again. Thank goodness for Firefox.

> We're still working on the specific style overrides needed to fix
> these rounding issues for IE6/7 and Safari for an interim solution,
> but it is my hope that if we can get Blueprint using the liquid
> changes in my example and enough blog posts pointing these weird
> rounding and layout issues out, that we can somehow light a fire under
> Apple and Microsoft to fix their rounding errors or whatever logic
> they are using to determine when to round up or when to round down.
> The Firefox team did the right thing as whatever Firefox is doing
> makes all the "em" math work rock solid.

> So to fix the rounding errors for IE6/7, you have to add override
> classes that drop the 'em' value by 0.01 or 0.001 or so. This will
> force the IE6/7 engine to force round down in the same way that
> Firefox does. I'll get those to folks once I have them all locked
> down.

> More to come on DxF about Liquid Blueprint when I blog about it.
> Please feel free to rip it apart and let me or Olav know where the
> model completely breaks down. It's still a work in progress.

> --
> Andrei Herasimchuk

> Principal, Involution Studios
> innovating the digital world

> e. andrei (at) involutionstudios (dot) com