Re: [css-d] Size calculations

2009-03-16 Thread Ib Jensen
2009/3/16 Gunlaug Sørtun gunla...@c2i.net:
 Ib Jensen wrote:

 Think I got the above about right. Hard to compress a thousand choices
 into a mail.


Thank you very much for the explanation.

I must invite my self for a long weekend, for a little chit-chat about
developing sites. ;-)



-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Size calculations

2009-03-15 Thread Ib Jensen
Hi.

I'm looking for some kind of formular to calculate sizes.

This is a hypotetical question:

I want a 2 column design with header and footer, a left nav- and
info-column, and a right content-column. Centered.


Lets say the size are:

Header and footer :  90%

These two columns together: 80%
Left column: 20-25%
Content column : 80-75%


How do I change these measurements to: em




-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Gunlaug Sørtun
Ib Jensen wrote:

 How do I change these measurements to: em

What are those hypothetical '%' you want to convert to hypothetical
'em', relative to?

That is: what is your hypothetical 100% starting-width?
You can't convert anything to 'em' without having an absolute starting
point.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Bill Brown
Ib Jensen wrote:
 I want a 2 column design with header and footer, a left nav- and
 info-column, and a right content-column. Centered.
 Header and footer :  90%
 These two columns together: 80%
 Left column: 20-25%
 Content column : 80-75%
 How do I change these measurements to: em

Use ems...and a calculator. Relying on the browser to calculate the 
percentage is sketchy at best. You probably want something like this:

~~~
!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
   'http://www.w3.org/TR/html4/strict.dtd'
html
   head
 title%TITLE%/title
 meta http-equiv='content-type'
   content='text/html;charset=utf-8'
 style type='text/css'
#head-frame,#main-frame,#menu-frame,#foot-frame {
 padding: 1px 0; /* Fix margin collapsing */
   }
#page-shell {
 margin:  0 auto;
 width:   80em;
   }
#head-frame, #foot-frame {
 background:  #dedede;
 margin:  0 auto;
 width:   72em; /* 90% of 80em */
   }
#page-frame {
 background:  #999;
 margin:  0 auto;
 width:   64em; /* 80% of 80em */
   }
#page-panel {
 background:  #ccc;
 margin-left: 16em; /* Same as #menu-frame width */
   }
#main-frame {
 float:   right;
 width:   48em; /* 75% of 64em */
   }
#menu-frame {
 display: inline; /* Fix IE double-margin bug */
 float:   left;
 margin-left: -16em; /* Width x -1 */
 width:   16em; /* 25% of 64em */
   }
/* FLOAT BEHAVIOR SWITCH FOR STANDARDS COMPLIANT BROWSERS */
#page-panel:after {
 clear:   both;
 content: .;
 display: block;
 font-size:   1px;
 height:  0;
 line-height: 0;
 overflow:hidden;
 visibility:  hidden;
   }
/* FLOAT BEHAVIOR SWITCH FOR IE */
#page-panel {
 display: inline-block;
   }
#page-panel {
 display: block;
 position:relative;
   }
 /style
   /head
   body id='www-css_sig-tld'
 div id='page-shell'
   div id='head-frame'
 p%HEAD%/p
   /div
   div id='page-frame'
 div id='page-panel'
   div id='main-frame'
 p%MAIN%/p
 p%MAIN%/p
 p%MAIN%/p
   /div
   div id='menu-frame'
 p%MENU%/p
 p%MENU%/p
 p%MENU%/p
 p%MENU%/p
 p%MENU%/p
   /div
 /div
   /div
   div id='foot-frame'
 p%FOOT%/p
   /div
 /div
   /body
/html
~~~

Hope it helps.
--Bill

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Bill Brown
Bill Brown wrote:
 /* FLOAT BEHAVIOR SWITCH FOR IE */
 #page-panel {
 display: inline-block;
   }
 #page-panel {
 display: block;
 position:relative;
   }

I lied: remove the position:relative from that last block. That's an 
artifact from another template. Sorry.

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Gunlaug Sørtun
Ib Jensen wrote:

 The template should fill a total of 90% of the viewport / screen.

 I don't know if this clears something.

Not really.

My viewport / screen is 3840pixel wide on one machine, but it is
1280pixel wide on another machine and 1440pixel wide on yet another.

No problem filling all these correctly with one set of percentages -
although it will look strangely wide on some viewports / screens.
However, my viewports / screens provide 3 different starting-widths for
converting to 'em' - and I have no idea what viewport / screen widths
end-users have.


You have to decide if the 100% starting-width is 800, 1024, 1280,
1600pixel or something else, since you can't convert percentages into
'em' directly for anything but font-size and line-height.


If your 100% starting-width is 800pixel, then 800/16='em' will hit
right as long as we're dealing with the default font-size for 96dpi.
If browsers correct correctly for resolution, then it'll still be
correct (in a manner of speaking) for other resolutions.

Problem is: browsers are not very good at the various resolution game
yet, so you may get more than one actual width as result on higher
resolutions - depending on browser.

Hope that came through a bit clearer.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Ib Jensen
2009/3/15 Bill Brown macnim...@gmail.com:
 Bill Brown wrote:

/* FLOAT BEHAVIOR SWITCH FOR IE */
#page-panel { display: inline-block; }

#page-panel { display: block; }

 I lied: remove the position:relative from that last block. That's an
 artifact from another template. Sorry.


It should be as corrected above your lie ;-)


I'll try it out, and se how it looks, and I, maybe be back !


-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Ib Jensen
2009/3/15 Gunlaug Sørtun gunla...@c2i.net:
 Ib Jensen wrote:

 How do I change these measurements to: em

 What are those hypothetical '%' you want to convert to hypothetical
 'em', relative to?
 That is: what is your hypothetical 100% starting-width?
 You can't convert anything to 'em' without having an absolute starting
 point.


The template should fill a total of 90% of the viewport / screen.

I want the header and footer in the template to fill 90% of the
viewport / screen.

The left- and content-column in the template should only fill 80% of
the viewport / screen.

I don't know if this clears something.



-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Ib Jensen
2009/3/15 Gunlaug Sørtun gunla...@c2i.net:
 Ib Jensen wrote:

 My viewport / screen is 3840pixel wide on one machine, but it is
 1280pixel wide on another machine and 1440pixel wide on yet another.

Kind a the same problem here:

I'm developing on a 19 widescreen, resolution unknown for the moment.

I'm writing this, looking for tips and tricks and seing my own and
other sites on a 22 widescreen.

 You have to decide if the 100% starting-width is 800, 1024, 1280,
 1600pixel or something else, since you can't convert percentages into
 'em' directly for anything but font-size and line-height.

Now you are forcing me do something quit new to me, taking
descissions. Problably because I want to much at the same time.
But I assume that the mostly used monitor-size is either a 17 or 19
screen, then it should be something around 800 or 1024px.

 If your 100% starting-width is 800pixel, then 800/16='em' will hit
 right as long as we're dealing with the default font-size for 96dpi.
 If browsers correct correctly for resolution, then it'll still be
 correct (in a manner of speaking) for other resolutions.

 Problem is: browsers are not very good at the various resolution game
 yet, so you may get more than one actual width as result on higher
 resolutions - depending on browser.

 Hope that came through a bit clearer.

I think.

That means roughly, that a developer should have at least three
screens with different resolutions and X number of browsers installed,
on different systems, to in fact have a chance to guess which size of
units to use.


-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Bill Brown
Ib Jensen wrote:
 The template should fill a total of 90% of the viewport / screen.
 I want the header and footer in the template to fill 90% of the
 viewport / screen.
 The left- and content-column in the template should only fill 80% of
 the viewport / screen.
 I don't know if this clears something.

If you don't care about IE, or you're not using full-height column 
backgrounds, you can get away with this:

~~~
!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
   'http://www.w3.org/TR/html4/strict.dtd'
html
   head
 title%TITLE%/title
 meta http-equiv='content-type'
   content='text/html;charset=utf-8'
 style type='text/css'
   #page-frame,#core-panel
 {width:90%;margin:0 auto}
   #head-frame,#core-frame,#foot-frame
 {display:table;margin:0 auto}
   #head-frame,#foot-frame
 {width:90%}
   #core-frame
 {width:80%}
   #head-panel,#core-panel,#foot-panel
 {display:table-row}
   #header,#menu,#main,#footer
 {display:table-cell;vertical-align:top}
   #head-panel,#foot-panel
 {background:#ccc;width:100%}
   #menu
 {background:#bbb;width:20%}
   #main
 {background:#ddd;width:80%}

   /* Faking display:table-cell for IE as best we can */
   #menu,#main
 {display:inline-block!ie}
   #menu,#main
 {display:inline!ie}
 /style
   /head
   body id='www-css_sig-tld'
 div id='page-frame'
   div id='head-frame'
 div id='head-panel'
   div id='header'
p%HEADER%/p
   /div
 /div
   /div
   div id='core-frame'
 div id='core-panel'
   div id='menu'
p%MENU%/p
p%MENU%/p
   /div
   div id='main'
p%MAIN%/p
   /div
 /div
   /div
   div id='foot-frame'
 div id='foot-panel'
   div id='footer'
p%FOOTER%/p
   /div
 /div
   /div
 /div
   /body
/html
~~~

Hope it helps.
--Bill

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Ib Jensen
2009/3/15 Bill Brown macnim...@gmail.com:
 Ib Jensen wrote:

 If you don't care about IE, or you're not using full-height column
 backgrounds, you can get away with this:

I do care about IE ( a lot of faul words ), to a certain limit  IE6 and up.
And wish to use full-height columns without graphics, just colors.


      #page-frame,#core-panel
        {width:90%;margin:0 auto}

Now I've had to calculate the other way round. From % to em. ;-)

      /* Faking display:table-cell for IE as best we can */
      #menu,#main
        {display:inline-block!ie}
      #menu,#main
        {display:inline!ie}

Is this a way of making a kind of table-layout ??


 Hope it helps.
 --Bill

At least I have something to play with.

Just got finished with your first suggestion.
It showed me that % and em, are two very diiferent units to play with.
I've had to recalculate the meassures, to something smaller. So it
could fit on _my_ screen, but the original meassures will problably
show up differently on another screen.



-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Gunlaug Sørtun
Ib Jensen wrote:

 That means roughly, that a developer should have at least three 
 screens with different resolutions and X number of browsers 
 installed, on different systems, to in fact have a chance to guess 
 which size of units to use.

Not at all. You can check all conditions on a screen with high enough
resolution, but you may have to keep track of those browsers and how
they evolve and respond to changes on the hardware side.

The reason I opted for such a large screen-area on my workstation, is
that I can simulate nearly all hardware/software induced conditions on
it through a few clicks. Most web designers can simulate parts of
modified conditions at the user-end by zooming up and down the entire
page in a capable browser.

First: get the terms, and sizes, right.

Resolution is somewhere between 72 and 300dpi and most viewports/screens
are between 640 and 3600px wide. Resolution vs pixel-width affect actual
screen size, so a 2400px wide screen with 220dpi resolution (not many of
those around, but they're coming) will be physically quite small in
size. So, forget about 15, 17, 19 and so on for screens. A screen is
so and so many screen-pixels wide and tall, regardless of its actual size.

This resolution vs. size range can not be covered by web designers by
using one size fits all methods - the browsers and end-user settings
have to bridge the gap. What we have to do is to allow browsers to do
their job - we have to work _with_ the media and not against them, and
only decide which limits we have to set so our creations have a chance
to survive.

The only somewhat safe way to lay out web pages so they work everywhere,
is to not lock sizes to anything but viewport - using percentage, and
decide what is too wide or too narrow for our creations.

'em' is locked to font-size, so 'em' is in most cases only useful for
setting limits - min-width and/or max-width, and those limits should be
quite generous.
'px' is also locked, so they're also most useful for setting generous
limits.


In time browsers and other software will be modified to un-lock both
'em' and 'px' - in a way, in order to make sensible use of higher
resolution on screens. Full page zoom is one way to do that, and most
browsers already have the basics (for manual setting) in place.
Screen-pixels and design-pixels then become relative to each other - as
they already are on regular printers, and the software will do the
conversion (see wishful thinking in another thread today).

For full page zoom browsers seem to go the adaptive zoom route,
probably because they can't cover the wide resolution/actual screen size
range any other way and make it fit on screen for all end-users. Most
fluid-width designs will then work quite well without modifications, but
both 'em' sized and 'px' sized designs may run into range problems since
they can't really adapt to viewports/screens unless browsers override
their fixed width (my browser-preference can already do that).

Fixed-width layouts, being it 'px' or 'em', will probably never go out
of fashion ... they just won't work very well outside their creators'
preferred range.

Support for media queries is slowly growing across browser-land, so we
are, or will be, able to modify our designs a bit to suit the various
conditions. Great care has to be taken here though, as we must know what
various browsers actually do under various conditions before we try to
improve things.


Now, browsers and screen-resolutions can only go one way, upwards, while
screen-sizes can and will go both ways. Thus, the future for rendering
on flat screens is predictable, although it is hard to say how quickly
they evolve and spread. They have to introduce one or more non-flat
screens for anything to change.


So, IMO, it is best *not* to convert a fluid layout into anything else
right now, but instead only control the upper and lower limit for its
fluidity so it doesn't become ridiculously and/or unusably wide or narrow.

That this control of fluidity can be achieved both forward and in
reverse, and in a few other ways, may complicate matters for those who
haven't grasped the whole adapt or fail concept. However, rising
resolution and both larger and smaller screens and various devices are
hitting the market around us, so quick learners will be at an advantage.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Michael Adams
On Sun, 15 Mar 2009 21:12:39 +0100
Came this utterance formulated by Gunlaug Sørtun to my mailbox:

 Ib Jensen wrote:
 
  That means roughly, that a developer should have at least three 
  screens with different resolutions and X number of browsers 
  installed, on different systems, to in fact have a chance to guess 
  which size of units to use.
 
 Not at all. You can check all conditions on a screen with high enough
 resolution, but you may have to keep track of those browsers and how
 they evolve and respond to changes on the hardware side.
 
 The reason I opted for such a large screen-area on my workstation, is
 that I can simulate nearly all hardware/software induced conditions on
 it through a few clicks. Most web designers can simulate parts of
 modified conditions at the user-end by zooming up and down the entire
 page in a capable browser.
 
 First: get the terms, and sizes, right.
 
 Resolution is somewhere between 72 and 300dpi and most
 viewports/screens are between 640 and 3600px wide. 

Phone and palm browsing is on the increase and screen width there is
typically under 400px.

 Resolution vs pixel-width affect actual
 screen size, so a 2400px wide screen with 220dpi resolution (not many
 of those around, but they're coming) will be physically quite small in
 size. So, forget about 15, 17, 19 and so on for screens. A screen
 is so and so many screen-pixels wide and tall, regardless of its
 actual size.
 
 This resolution vs. size range can not be covered by web designers by
 using one size fits all methods - the browsers and end-user settings
 have to bridge the gap. What we have to do is to allow browsers to do
 their job - we have to work _with_ the media and not against them, and
 only decide which limits we have to set so our creations have a chance
 to survive.
 
 The only somewhat safe way to lay out web pages so they work
 everywhere, is to not lock sizes to anything but viewport - using
 percentage, and decide what is too wide or too narrow for our
 creations.
 
 'em' is locked to font-size, so 'em' is in most cases only useful for
 setting limits - min-width and/or max-width, and those limits should
 be quite generous.
 'px' is also locked, so they're also most useful for setting generous
 limits.
 
 
 In time browsers and other software will be modified to un-lock both
 'em' and 'px' - in a way, in order to make sensible use of higher
 resolution on screens. Full page zoom is one way to do that, and most
 browsers already have the basics (for manual setting) in place.
 Screen-pixels and design-pixels then become relative to each other -
 as they already are on regular printers, and the software will do the
 conversion (see wishful thinking in another thread today).
 
 For full page zoom browsers seem to go the adaptive zoom route,
 probably because they can't cover the wide resolution/actual screen
 size range any other way and make it fit on screen for all
 end-users. Most fluid-width designs will then work quite well without
 modifications, but both 'em' sized and 'px' sized designs may run into
 range problems since they can't really adapt to viewports/screens
 unless browsers override their fixed width (my browser-preference can
 already do that).
 
 Fixed-width layouts, being it 'px' or 'em', will probably never go out
 of fashion ... they just won't work very well outside their creators'
 preferred range.
 
 Support for media queries is slowly growing across browser-land, so
 we are, or will be, able to modify our designs a bit to suit the
 various conditions. Great care has to be taken here though, as we must
 know what various browsers actually do under various conditions before
 we try toimprove things.
 
 
 Now, browsers and screen-resolutions can only go one way, upwards,
 while screen-sizes can and will go both ways. Thus, the future for
 rendering on flat screens is predictable, although it is hard to say
 how quickly they evolve and spread. They have to introduce one or more
 non-flatscreens for anything to change.
 
 
 So, IMO, it is best *not* to convert a fluid layout into anything else
 right now, but instead only control the upper and lower limit for its
 fluidity so it doesn't become ridiculously and/or unusably wide or
 narrow.
 
 That this control of fluidity can be achieved both forward and in
 reverse, and in a few other ways, may complicate matters for those who
 haven't grasped the whole adapt or fail concept. However, rising
 resolution and both larger and smaller screens and various devices are
 hitting the market around us, so quick learners will be at an
 advantage.
 
 regards
   Georg
 -- 
 http://www.gunlaug.no
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



Re: [css-d] Size calculations

2009-03-15 Thread Ib Jensen
2009/3/15 Gunlaug Sørtun gunla...@c2i.net:
 Ib Jensen wrote:


 First: get the terms, and sizes, right.

 Resolution is somewhere between 72 and 300dpi and most viewports/screens
 are between 640 and 3600px wide. Resolution vs pixel-width affect actual
 screen size, so a 2400px wide screen with 220dpi resolution (not many of
 those around, but they're coming) will be physically quite small in
 size. So, forget about 15, 17, 19 and so on for screens. A screen is
 so and so many screen-pixels wide and tall, regardless of its actual size.

Uuuups.

Something that I have completely misunderstood.
Thats problably why I sometimes have problems getting the right size
of the layout i working with locally.


'em' is locked to font-size, so 'em' is in most cases only useful for
setting limits - min-width and/or max-width, and those limits should be
quite generous.
'px' is also locked, so they're also most useful for setting generous
limits.

By this, you mean that, how should I write it:

A fluid / Elacstic layout:

The skeleton of a layout in %
Font-size in % or em

A fixed layout:

The skeleton of a layout in em or px
Font-size in em or px


-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Size calculations

2009-03-15 Thread Gunlaug Sørtun
Ib Jensen wrote:

 By this, you mean that, how should I write it:

 [...]

Some say elastic when they mean fluid layouts, while some say
elastic when they mean em-sized layouts. Confusing.

To cut through; for the basic layout, I mean:

1: Fluid layout: all widths in '%'. (One can also use auto-width in some
cases.)
- adapt well to various viewports, but can become overly wide and narrow.

2: Conditional fluid layout: all widths in '%', + min-width/max-width
for entire layout in 'em' and/or 'px'.
- adapt well to various viewports, and can *not* become overly wide or
narrow.
- if 'em' is used for max-width, I sometimes refer to these as
conditional elastic since they behave as fluid and 'em'-sized at the
same time.

3: Fixed layout: all widths in 'px'.
- can't adapt to anything.

4: Em-sized layout: all widths in 'em'.
- can't adapt to anything.


Basic layout variants:

5: Fixed - fluid - fixed: overall width in '%', with fixed-width side
columns and fluid main column.
- adapt well to  various viewports, but main column can become overly
wide and narrow.
- also comes in 2-columns fixed-fluid or fluid-fixed, and in other
column-mixes.

6: Conditional fixed - fluid - fixed: overall width in '%', with
fixed-width side columns and fluid main column, + min-width/max-width
for entire layout in 'em' and/or 'px'.
- adapt well to various viewports, and main column can *not* become
overly wide or narrow.
- also comes in 2-columns fixed-fluid or fluid-fixed, and in other
column-mixes.

7: Overly backwards and unnecessary complex adaptive fixed/em-sized
layout:  width in 'px' or 'em', + max-width in '%' and min-width in 'em'
or 'px'.
- can adapt to various viewports to a certain degree, but 'em' sized
tends to break under font resizing stress unless all font-sizes are left
at default.


Font-size for all the above in whatever unit, but preferably in '%'
and/or 'em' for optimal end-user friendliness.


FYI: I most often use a 2 or 6 variation with generous min/max
limits. For my personal site I use 6 and mix in conditional elastic
for the main column in an otherwise fixed-fluid-fixed layout. A bit of
cross-container absolute positioning tops it up.
I then add in mediaqueries to reconfigure the entire layout for really
small screens, and look to the future for help ;-)

In essence: one can mix in layout variations in one layout to kingdom
come and get away with it, as long as one understands the adapt or
fail concept ... and test well.

Not possible to make really old/obsolete browser play along with
everything though, so one still has to be pragmatic and make choices for
under which conditions ones creation has to work and under which it may
be allowed to fail - and how much it should be allowed to fail.

However, ones creation should only be allowed to fail for real in those
old/obsolete browsers, as one should be able to at least hope that
makers of new browser versions know what they're doing and can make
_their_ creations work.


Think I got the above about right. Hard to compress a thousand choices
into a mail.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/