Zooiblog

Search the Zooiblog

Follow the discussion below and participate.

Support this site.

Liquid Elastic Layouts

10

Sizing is easy

‘That’s a gutsy statement, mistuh.’ I know. But it is.

By now, you’ve all been told the usage of ems for liquid widths, you know about maximum widths for capable browsers. The real trick is in the correct usage.

Imagine…

You want a layout that resizes with the window, but make it resizable with ems. Simply put, a combination of Elastic Lawn and a liquid layout. Easy concept, I’ve worked it out for ya.

The beginning is easy. I hope you have set your font-size? You didn’t. Well, say, something like body { font-size: 10px; } will do the trick. Why 10px? That’s easier to measure with. Set your content box or whatever the piece of layout is called that you want to size dynamically to a tasty width of 90% or something like that.

The box will now resize according to the screen size. But, of course, that’s not what we want. You could end up have line-widths of 1500px, and believe me, that’s not nice. And the danger is also in 640×480. Your box will be tiny. And that makes it like really hard to read!

But, there is a way to prevent this. Normally, what you would do is set the min-width to a nice pixel value, like 600. But that, again, is not what we want. We want a layout that can zoom. Zoom is key. min-width: 60em; will make this the minimum width (in most browsers), but it’s zoomable! So people with bad sight can resize the text and the line-width and keep it all normal.

The maximum width is something you might want to think about. I usually don’t go above 1000px. So make it this: max-width: 100em;. Now, people with a screen resolution of 1600×1200 (or those lucky bastards with the Apple 30") will have a quite readable page. And, more importantly, people with bad sight can zoom and have their maximum width expanded. Funky eh?

Now, when people with big monitors (maybe… because they have really bad eyes!) toss their browser full-screen, with an astonishing 1600×1200 or whatever you people use nowadays, the content width stops at 600px, or, to be certain, 60em. But hey, since they have bad vision, how about resizing the whole shebang, to a 15px font-size? The width expands, and the content remains its relative line-width. Ideal, ain’t it?

Final result

Of course, what does it look like? I’ll give you the short answer: check this. Use it at your own risk.

Let me know if it works, and how well it performs for your purpose.

Hiccups

As we all might know, IE doesn’t support max- and min-width, but there’s a hack available for just that, be it with a Javascript. I hope people use a good browser, and this trick relies on that.

Posted on 2004-10-24 while devouring lunch.

10 comments

  1. Gabriel Mihalache 2004-10-24 #1

    If you design your site around people with disabilities or otherwise obscure screen sized you’ll end up with an out-of-control layout which will break the next time you’ll want to include an image.

    My own site is in terrible condition, layout-wise. It’s my playground and Ive decided that I’m supporting 1024×768+ only, but that’s just me.

    Fixed-width in pixels is the way to go, for now. Otherwise, you’ll have to deal with all the problem DxF v2 (http://www.designbyfire.com/) dealt with.

  2. Rob 2004-10-24 #2

    If you design your site around people with disabilities or otherwise obscure screen sized you’ll end up with an out-of-control layout which will break the next time you’ll want to include an image.

    That’s the reason why I made it like this. Include an image that’s up to 400px wide and there’s no problem at all. You could toss in an overflow: hidden, but you can do as you please.

    Listen, this is only a method. Implementations are yours. This is not something I recommend you to use, it’s a workaround for that one time you need it.

  3. Mathias Bynens 2004-10-25 #3

    Flump’s offering a great Absolute to Relative option to go with his Online CSS Optimiser/Optimizer, which you can use to convert your current fixed width site design to a liquid one.

    Great tutorial, Rob, I must look into this.

  4. huphtur 2004-10-26 #4

    [offtopic] Rob: yur layout acts kinda funky when resized to 800width in FF.

  5. huphtur 2004-10-26 #5

    oops.. I should have said layout of ZooiBlog, not the example.

  6. Rob 2004-10-26 #6

    [offtopic] Rob: yur layout acts kinda funky when resized to 800width in FF.

    That’s because of the Halloween mess. It’ll be over 1st of November.

  7. Ethan 2004-10-26 #7

    There seems to be some junk before the DOCTYPE declaration in your demo -- shows up in my browser as “”, for what it’s worth. Also, when increasing the size the text, a horizontal scroll bar pops up pretty quickly at most window widths.

    That aside, nice demo -- thanks for the excellent read, Rob.

  8. Rob 2004-10-26 #8

    Ethan, that junk has something to do with my server and specifically this thing. I had test versions online before, and they had the same strange characters in front of them. The resizing of the text, well, that’s the whole trick. When you resize it, the layout will resize and therefore not conform to the 95% width. And yes, that makes it too big. Keep in mind that this is about really high resolutions. Of course, when you use 800×600 and you resize, that breaks it. That could be prevented by some Javascripts, but I don’t see the real need. I lay a basis, you work on them.

    And thanks, I appreciate it.

  9. Jop 2004-10-26 #9

    That’s probably because the character encoding is ISO-something instead of UTF.

    So now for the Javascript hack for IE, I personally use conditionial statements and the ‘expression’ workaround to force a max-width in IE (more info at http://www.svendtofte.com/code/max_width_in_ie/ ). I like this method since it keeps the two methods seperated, and it seems that all users can use it. But it looks an afwul lot like Javascript, are those expressions in fact Javascript - so will they work with Javascript turned off?
    Are there any drawbacks in using expressions (I believe they’re available since IE 5?), or any reasons why to use Javascript?

    One last point, which you are probably aware of is that pixel-sized fonts won’t resize properl y in IE, so that zoom thing is of no use in IE.

    To conclude, nice article, especially since I’m developing a almost-flexible-layout for a client at the moment.

  10. Rob 2004-10-26 #10

    That’s probably because the character encoding is ISO-something instead of UTF.

    I’ll look into that, thanks.

    One last point, which you are probably aware of is that pixel-sized fonts won’t resize properl y in IE, so that zoom thing is of no use in IE.

    I’m not sure, but I’ll edit it in the post and in the example. I’ll try to keep everybody happy, of course.

    To conclude, nice article, especially since I’m developing a almost-flexible-layout for a client at the moment.

    Okay. Let me know if this was of any help.

    On the Javascript and browser behaviour: that’s not my cup of tea. So I hope other people around here can help you out.

Participate, yes!

(Rock out with Textile; it's what the cool people use!)