Fixed vs Fluid vs Elastic, and basic setup Options

[barrykins]

Well. I've been going back in forth in deciding on how to design websites overall. Fluid is amazing, yes. But however, it can pose problems to people that have cinema display Macs. Right? I develop on a macbook pro so my 1440x900 resolution would be different then that of someone one a windows.

I guess Im looking for input on what you design in and kind of the basic set up to let everyone be able to see.
As such I use the 960 grid for laying out my wireframes but I'm confused about one thing. How big do you exacly make the Background image so a screen with a larger size may be able to see it?

This is what I currently use to set up the main containers and bg, am I correct? Centering is a issue with em because I don't exacly understand the em measurements. Any input would be nice. Im majoring in graphic design so all web design is kind of self taught.

CODE

html, body{
background:url(..) no-repeat;
background-position:center;
height: 100%;
margin:0;
padding:0;
width:1000px;
}

#container {
position:relative;
min-height: 100%;
width:960px;
}

#main {
position:relative;
min-height: 100%;

[barrykins]

The em unit of measurement in CSS (and its close cousin, the ex unit) comes from typography. In typography, an "em" is the width of the letter "m" in whatever font you're using (get it?). Similarly, the "ex" is the height of the letter "x" in that font. CSS uses the same concept, but defines the units a bit differently. In CSS, an "em" is equal to the "computed value of the 'font-size' property". CSS defines multiple ways for a browser to interpret an "ex", but it usually ends up being 1/2 of an "em". So what does all that mean? When rendering CSS, everything ultimately becomes specified in pixels; if you're dealing with a 12-pixel font, then an "em" is 12 pixels and an "ex" is about 6 pixels. Likewise, if you're dealing with a 24-point font, an "em" is 24 pixels and an "ex" is about 12 pixels.

That makes perfect sense since the web translates into pixels rather. I actually just read that in eric meyers book after I asked haha.

I guess that also depends. "Big enough" is the best answer. Optimally, you'll create a graphic that will look good on the most number of screens, and then have some other background color that blends well with it for wider screens (or a background made up of multiple images). If you're dealing with a pattern, you can always repeat it horizontally.

But lets say I use a 1440x900 BG element. How can I center the container to that. I know that the bg will be in the html, body but what type of margins or padding?

And I know these are all simple questions but it seems that they are the ones no one wants to anwser.

At the other end of the spectrum, more and more people are using handhelds like iPhones or Blackberrys to browse the web. It can be hard to create an elastic or fluid layout that looks good on everything from an iPhone up to a 2000+-pixel screen.

Couldn't you then just create a javascript on the main page to direct a mobile phone to a mobile version of the website? detect screen size and point browser to what page depending on that size?