uwMike » Archive » Jello: A Different Liquid Layout

I am in Seattle on co-op. See you in Toronto at Christmas!

Jello: A Different Liquid Layout

May 4th, 2005

Note: This page has nothing whatsoever to do with the gelatin dessert, Jell-O. It’s describing a technique for web designers. The current version of it is described in my article for P.I.E.

This new design sports what I believe to be a brand new way of creating a website that is flexible relative to one’s browser.

Since the majority of my small readership are not CSS nerds, I’ll start with a little background. Feel free to skip over that if you just want the code. (If you don’t want any of it, the final example is right here)

Liquid And Fixed Layouts

Since the beginning of visual presentation for the web, there’s been a debate online about whether it’s more appropriate to publish a website that changes relative to the size of the browser, or stays a consistent width.

This is primarily a design-debate that’s only new because no other medium in the history of the universe has been served up in a format where the end-user has so much control over the experience.

Many good discussions can be found elsewhere, so I won’t insert a diatribe here, but instead link to a decent summary at Whitespace.

There are additional technical and aesthetic challenges in implementing a liquid layout, but I’d like to present this trick as a way of softening a few of them, and addressing some of the concerns that Scrivs points out in that Whitespace article.

Jello

Jello is halfway between a liquid and a solid — it’s got a little of both.

I wanted a layout that would expand in the browser, but not expand in a way directly proportional to the width. Something that would be 770px wide in an 800px viewport, but not have to be 1232px wide in a 1280px viewport.

What was the solution? Make a layout that’s a fixed pixel amount plus some percentage of the remaining amount. Chances are, you’ve already resized your browser to see how this page changes shape at different widths, and you can see this effect in action.

Implementation

I owe a thanks here to Mr. Brill, for pointing out the utility of negative margins.

To get the result I’ve described, you simply work in reverse: Chop off half the fixed amount from each side of the page, make a percentage-width column in the middle of that, and then bust out of the two sides using a negative margin for whatever that fixed quantity was.

Here’s the first example.

If you’re viewing it in a browser that works, you see the intended effect, at its bare bones. But uh-oh, not every browser works.

Fixing Bugs

IE does strange things to negative margins unless you float the parent, and position it relative. That’s an easy fix.

It also botches the interior percentages. But that’s no problem, just wrap the inside in a container set to width: 100%;. (This is also convenient because it may be used as a vehicle for easyclearing)

But wait… it’s still messed up. If you just load the page, it staggers along okay. But go ahead and try resizing it. You get a strange flickering/shifting/whatever that is rather unpleasant. What’s the fix here?

An Alternative Approach

If we can’t bust out of both sides of the flexible middle column, what about just one of them? Take the whole bite out of the right side, and then shift it back with relative positioning?

Here it is, working in IE.

But now we’ve created two new problems: The float declaration is causing Firefox to do strange things with the right margin, and Safari’s got a great big horizontal scrollbar.

What’s the answer? Filter IE and give it the slightly modified edition of Jello, and let everyone else have the original.

The Result

Here it is. It starts with the two-negative-margin version, and then adds the float declaration and the left-shift for IE using the star html filter.

Remarks

There’s also elastic design, of course. I haven’t forgotten about that. I just wasn’t sure how to fit it into all this. (Fixed portion in EMs plus percentage, anyone?)

One of the unexpected positive things I realised about this is that there’s an implied min-width cross-browser and without scripting. If you want to put images or flash movies on your site, you can do it without breaking the floats. Simply determine what ‘fixed part’ you want to impose, and then make that the maximum width for your fixed-width content.

I’ve only experimented with this for a few weeks, and I’m a coder more than a designer, but I hope some of the designers out there will find it useful as well.

Mike

Update: Big John points out that the entire alternate-IE version is unnecessary if height is used instead of float to trigger Layout. A much superior alternative to the original approach, therefore, is here.

← Earlier Later → Posted at 5:36 am to Web Tech, Website.

Discussion

Really interesting layout.
I have some questions regarding calculations.
1) You have used 270px left and right margin on the body element. How this affect the rest of measures?. Or, in other terms what is the exact result, at the various resolutions, of left and right 270px padding in body toghether with the 60% width applied to id=”stretch”?
2) container 265px negative margins and 3px borders have some relation with the 270px body padding?
I think I have understood the technique, but I still miss the logic behind the numbers.
Thanks in advance
Marcello Cerruti

Posted at 4:19 am on May 6th by Marcello Cerruti.
I’m going to try to discuss more about the math of it shortly, but basically that set of numbers makes the viewport width

w = (v - 540) * 0.6 + 530

where v is the width of the viewport. So, using that formula, here’s a couple widths:

640 screen = 590 width (92%)
800 screen = 686 width (86%)
1280 screen = 974 width (76%)
1600 screen = 1166 width (72%)

I’ve overemphasised the effect in the demo to make it more obvious, but part of the beauty of it is that it can be as subtle as you need. You could make it 700px + 10%

Posted at 8:43 am on May 6th by Mike.
A fellow by the name of Glenn Davis, manager of Project Cool, coined the term jello web site designs for HTML tables back in the 90s.

Posted at 12:06 pm on May 6th by Christopher Schmitt.
nice article Mike, gonna give this a spin, Ive read some good things about negative margins, around and about lately, but I’ve never made use of them as yet…

will be glad to read your math entry next…math…ack..one of the reasons I went to art school heh.

Posted at 1:21 pm on May 6th by clint.
Christopher: Whoops. I felt compelled to assign this techique a goofy name, and that was the first thing that came to mind. At least it’s not an acronym.

Clint: I was a little scared of how IE would feel about negative margins, but Brill’s article persuaded me that the worst of the problems could be hacked around or avoided. And really, if it weren’t for Safari’s scrollbar, Method #2 would be fine as the general approach.

My only main concern browser-wise is that it hacks against IE6. Both methods work and are compliant, but concievably, IE7 could ‘fix’ the * HTML hack yet still cause the wierd jumpiness when resizing Jello. (But after all, it’s jumpiness — it’s not like the whole thing falls apart.)

Posted at 2:00 pm on May 6th by Mike Purvis.
First off, I just want to say I am impressed. Really good concept and I can see this being picked up by a number of designers. I have tended to go fixed with, but this really opens up a new arena for layout.

Thanks for sharing.

Posted at 2:38 pm on May 6th by Joshua Brewer.
It’s also been called elastic layout.

http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

Posted at 3:21 pm on May 6th by Tony.
Joshua: Thanks for the kind words. I’d hoped that a technique like this would be encouraging since it’s not as drastic as full liquid, and you get min-width for free.

Tony: Elastic is when your site’s size is based on the size of the text. This isn’t quite the same idea. (But thanks for posting the big long link — it reminded me to implement overflow:hidden on comments)

Posted at 5:14 pm on May 6th by Mike Purvis.
This is awesome! I’ve been fiddling with a way to get IE/Win to reliably work like this (using CSS) for a while now, but since I work for a firm that hasn’t embraced XHTML and CSS based layouts I haveyet to wrap it up.

We’ve been doing this kind of thing with table based layouts for years (as an example, here’s a site I did up a couple of years ago - http://www.christinacavanagh.com/), but this is a great development on the XHTML/CSS front. Thanks!

Posted at 12:21 am on May 7th by Dan Sauve.
Oooops excited to study your technique I skipped the last line where you were talking about a coming artigle about the math…
Thanks again for sharing and thanks for the patience and the explaination, I’m gonna to test and study with the hints you have posted in reply to my first comment.

Posted at 6:15 am on May 7th by Marcello Cerruti.
Why can’t I think of stuff like this? Sigh. It’s pretty cool tho, and I love the auto min-width effect! Sure hope it doesn’t start throwing off bugs when people start jamming stuff into it. I guess there’s only one way to find out!

Posted at 4:13 pm on May 7th by Big John.
Forget the IE float hack and use
* html #container {display:inline-block;}

This make IE work the same as other browsers.

Posted at 4:36 pm on May 9th by Stu Nicholls.
Nice find, Stu. I realised after I published this that it’s not so much the float that’s important, it just needs anything to give it Layout, the mysterious IE property.

The Holly Hack would work just as well; it doesn’t really matter which end of the wrench is used. But whatever it is, it pretty well has to be hidden from non-IE.

Posted at 4:52 pm on May 9th by Mike Purvis.
Jello a new way of desining? No, more like an old way. Check out this article I published back in 1999. The term jello and what you are technically describing has been around for a long time in several different forms. I use some PHP and Javascript to do the same thing on Digital Web Magazine… I had mixed success at it. A lot of readers didn’t like it. So we went with a more fixed solution for the content and liquid solution for the interface.

Posted at 7:53 pm on May 9th by Nick Finck.
Nick: It seems to be an unfortunate accident of history that the term ‘Jello’ has been previously used to describe centred fixed-width sites.

As a newcomer to CSS in the last several months, I hadn’t ever seen the word ‘Jello’ used by Meyer, Zeldman, or Shea to describe a CSS technique. I apologize for the mistake in nomenclature.

What I’ve used the term to describe is the exact px + % effect demonstrated above, which is a little more complicated than just centering, and hasn’t been written about before, I don’t think.

Posted at 12:12 am on May 10th by Mike Purvis.
I notice that if you change the #container border to 1 pixel wide, and slowly reduce the size of the browser, you periodically lose the right border. (Firefox 1.0.3)

Posted at 2:22 am on May 11th by Bob Rackers.
what is jello made out of? Because some kids in my class said jello was made out of animals even a parent said jello was made out of animals.

Posted at 9:25 am on May 28th by alexandra.
Bob,

The border problem is a known issue in Firefox, and Mozilla-based browsers. When Firefox ends up with a container that isn’t on an even pixel, it will occasionally drop one pixel from the rendered box’s width and/or height. One-pixel borders often vanish.

Posted at 11:29 pm on May 28th by Kevin Barkan.
Hello Mike, thanx for sharing your ideas with us. I am designing my new website to be 100% XHTML compliant. On the other hand i also wanted to fit in a resolution of 800×600 screens. This night,i thought about trying to create something which would make it possible to stretch that layout if the user had a bigger resolution.

Anyway, this technique is really what i am looking for. If the technique works in most browses (browsercam.com) i will definitly use it on my own site!

Thanx again!

Posted at 3:51 am on May 31st by Gilles.
By the way, you forgot to mention the \”ie specific\” part on the test page:
```
/* helps IE get the child percentages right. */
#wrapper
{
    width: 100%;
    text-align: left;
}
```
Posted at 4:01 am on May 31st by Gilles.
sorry for yet another comment ;)

I made screen captures for you on http://www.browsercam.com, drop me an e-mail if you want the url.

Posted at 4:13 am on May 31st by Gilles.
Hi Mike

This is an excellent resource and a very interesting read. Thanks so much for posting and sharing with the community. I have been playing with layouts using the code and have come up with this. Wilsons. How do I set the menu to sit inside the box?

Thanks once again.

Rich

Posted at 12:36 am on June 4th by Richard Brown.
hello everyone especially to Marcello Cerruti!!!

nice work.i hope to learn about it much.

yours,
jhulyet

Posted at 9:40 am on June 4th by jhuls.
I suggest we refer to it as the “Jello Mold”, to differentiate it from earlier uses of the word “jello”.

I found that with a complex neg margined 3-col layout inside it, a height on #container destroys IE, so the Holly hack fails in that case. Zoom and inline-block are not supported by IE5win, so I’m staying with the float fix for the time being.

Check out this temp demo:
http://www.frontiernet.net/~cssjunkie/temp/jello/piefecta-test.html

You can’t get a lot more complex than source ordered float cols that are neg margined, inside yet more neg margined wrappers! Still, I tried to do so by applying the sticky footer method, but was defeated by that #container height bug. Oh well.

I see the natural min-width effect to be even more important than the Jello effect, since it eliminates the need for scripting to get min-width wrapppers in those pages IE has “problems” with. Woohoo!

Posted at 1:51 am on June 5th by Big John.
I discovered that the float on the #container is breaking IEmac. Make sure the mac hiding hack start comment ends with */ so IEmac won’t see it.

I also found that any % dimension on the neg margined element causes IEwin to lose that margin. The Holly hack can still be used in place of the float, but it must be changed to height: 0; so IE won’t see that %.

Posted at 1:45 am on June 6th by Big John.
Thanks for checking IE/Mac, John. I was a little bit concerned about that, since I haven’t actually got a Mac. My only opportunity to test on it was a brief crack at Safari.

And yeah, “Jello Mold” is probably a better name, since “Layout” is a misnomer anyways…

Posted at 12:06 pm on June 6th by Mike Purvis.
Further news to report. The Problems you encountered with pos:rel and float on the #container in IE are due to the combo of rel+float. Since the floating is only needed to induce layout, another mathod can be used that will then negate the need for the special margining in IE.

You can’t use the Holly hack, because it relies on height: 1%; to work, and any % dimension on that DIV causes a horrible IE bug.

However, a height: 0; does the same thing, and does NOT trigger that bug! So just send IEwin this:

position: relative;
height: 0;

..and those messy hacked margins and left shifting will become unnecessary.

Posted at 2:10 am on June 10th by Big John.
Wow, nice find. I’ve put up a second example here, which incorporates that. Definitely a better approach.

Posted at 2:50 pm on June 11th by Mike Purvis.
Mike,

You have lost 1 pixel from border-right in firefox 1.0.4 in index2.php!
Have you noticed that?

.bonga

Posted at 3:15 am on July 15th by .bonga.
Yeah, it’s mentioned above in comments #16, with the explanation in #18. It’s a known bug in Moz browsers.

Posted at 1:47 pm on July 15th by Mike Purvis.
Hey, this 1 pixel bug eliminated in the latest Firefox! (1.0.6) It works fine! :)

Posted at 11:43 am on July 22nd by .bonga.
30 July 2005:

Yesterday I built my underwater cameraman website using this technique, basing a lot of my code on code from Big John’s Jello Piefecta. Thanks for the ideas Mike and Big John.

I’d like to point out that my page does not render correctly in Dreamweaver MX2004’s design view. It’s not WYSIWYG. It’s very wide and needs to be scrolled sideways. So for some people the content would be very difficult to work on if they adopt this approach.

I’d also love to know if my page displays proplerly in IE5 or any other browsers for that matter. I’ve tried to retain the various hacks advised. I’ve only tested it on Firefox and IE6. I’ll have a play next with BrowserCam.

Note: I might change the structure of my site in the future away from this concept. Just in case someone is confused when they take a look and it’s not built the Jello way.

Posted at 2:12 am on July 30th by Nick Hope.
Much as I love this layout I’ve now gone back to a fixed layout for reasons of:
1. WSYISYG in Dreamweaver design view.
2. More predictable printing without need for print-specific stylesheet. No blank leading and trailing sheets.
3. Simplicity. My brain simply struggles with updating content in a deeply nested structure.
However I’ve moved my jello page to http://www.marine-life.info for a while if anyone wants to see it there.
Posted at 7:27 am on July 31st by Nick Hope.
This is a great system, but it positively explodes on Safari if, at load time, the window is narrower than min-width. Yikes! Try it!

Safari 2.0 (412.2)

Posted at 10:11 pm on August 2nd by Steve Luscher.
It is terrible that I am taking up space here, but I am new to CSS (two days in) so I just came across the jello mold concept but I am most envious of what I see in the “http://www.positioniseverything.net/articles/jello.html” page. There is a left hand “sidenav” that stays fixed, and a top header that spans the width of the page with “The Jello Mold Piefecta” in it.

The CSS and XHTML source code I copied and pasted did not render this page. May I have the complete code for this style of layout? If I use this layout how should I reference or attribute it as your work under Creative Commons license?

Posted at 12:07 am on August 11th by Sa-Appreciative.
Hi mike,

Nice to see your blog completely revamped along the shore.
However, I completely forgot to mention that I have implemented a modified version of your method on my experimental
blog here.
Your article is featured there as well, as you kindly once had agreed on.
The article ranks pretty well at golden keywords for “Jello Mold Piefecta”,as far as I could see from my Google referrers.

It is just an experimental blog, where I like to play with my different Ideas,
and as some of you might know, the Blog is driven by Textpattern.
The implementation differs basically in the fact, that the layout is left-aligned.
There are many things, that don’t work as expected, all this is explained on the About Page.
The method used remains yours.

With best regards, marios

Posted at 5:13 pm on August 3rd by marios.
I’d love to use the jello layout, but the demos appears to break in ie 7. Is there a quick fix?

Posted at 9:24 am on October 9th by Rob.
very very good.

Posted at 9:26 pm on December 11th by wsaspx.
Mike,
This is great Information.
I have some question. How do I design a page like this one? What are the codes?
Is the wood a picture background? Could I use a color?I have just started web designing!!! I use frontpage 2003.
I need to learn how to make a page like this. i have one I’m working on and can’t get it to work on differnt browsers.
http://www.wwpsite.com/JDS.htm I will be deleting the buttons I can’t get the hearder picture to adjust or the buttons. Help SOS

Posted at 9:36 pm on February 1st by Wayne.
Hi. The horizontal scroll bar is missing in firefox 2. : (

Posted at 12:22 am on July 1st by Schmoe.
thanks for the GREAT post! Very useful…

Posted at 12:37 pm on November 21st by Whatever-ishere.
A fantastic site, and brilliant effort. A great piece of work.

Posted at 7:43 am on January 13th by sveta.
Just promote me off. My head’s combating to assail if I don’t nasser off some leise soon.

Posted at 10:15 am on February 19th by DeetaRasphes.
[...] hablamos de web. Y lo que normalmente discutimos es si debemos utilizar layouts fijos, líquidos, mixtos y un sinfín de variedades. El problema de fondo es cómo nos adaptamos a las tendencias de uso de [...]

Posted at 11:19 am on April 10th by el factor humano » Archivo » Tamaños de Pantalla, Resolución, Móviles y el Cambio Permanente.
[...] should design my sites using Jello or Elastic [...]

Posted at 12:04 pm on April 27th by LostinJapan » Blog Archive » At the Slouc Cafe Programming, but Sleepy.
[...] Um min-width per reinem CSS in IE < 7 zu emulieren, gibt es zwei Methoden: 1. Stu Nicholls 2. Mike Purvis: Jello: A Different Liquid Layout [...]

Posted at 3:33 am on November 5th by Workaround f�r min-width bei IE6... - XHTMLforum.
Hy

I´m trying your concept in the vertical way too but i´m not able to get it working.
Is there a way to do a liquid layout that expands vertically like yours does horizontally?

Greetz

Posted at 8:18 pm on November 11th by flo.

You can use Markdown for style. I love hearing from readers, but please don’t hijack the discussion, use offensive language, or try to sell anything.