Shortly after I put up the [Jello article](http://uwmike.com/archive/jello-liquid-layout/), I realised that the technique is really a wee bit silly. It’s great because it’s so tweakable, but it’s silly because the method of tweaking is mostly just trial and error.

Why didn’t I notice this before? Because as a programmer by nature, a lot of my design process is a sort-of haphazard _try different things until it feels right_ approach.

But for all the _other_ designers out there, Jello would be most useful if it came with a tool for creating the exact effect you want.

Well [here you go](http://uwmike.com/layout/jello/calculator.php).

The default is 540 + 60%. If you don’t want it quite so wide, 628 + 41% happens to be the values that make it [700px at 800x600 and 900px at 1280x960](http://uwmike.com/layout/jello/calculator.php?scr1=800&site1=700&scr2=1280&site2=900). (not counting browser chrome)

###The Math Of It

It’s all wrapped up in the calculator, but for those interested, here it is:

As I mentioned in [this comment](http://uwmike.com/archive/jello-liquid-layout/#comment199), the width of the #container is governed as such:

w = (v – f) * p + f

* w – width of #container
* v – width of the screen
* f – fixed quantity
* p – percentage of the remander

If we plug two sets of values, we’ve got a system of two equations– two equations, two unknowns:

w₁ = (v₁ – f) * p + f

w₂ = (v₂ – f) * p + f

With a little bit of re-arranging, the f may be isolated:

f = (w - vp) / (1 - p)

With f isolated, the two may be set equal to each other, since f is constant in both cases:

(w₁ - vp) / (1 – p) = (w₂ - vp) / (1 - p)

The denominator disappears, and what’s left is this:

p = (w₁ - w₂) / (v₁ - v₂)

Once the p is solved for, all you need to do is plug it back in here, to get f:

f = (w₁ - v₁p) / (1 - p)

Mike

← Earlier Later → Posted at 1:38 pm to Web Tech.

 . Short Haircuts with Bangs. Bob Short Hairstyle. Messy Short Haircuts.