This is an age old question, and one that standards proponents will be quite passionate about. This can also become quite a lengthy topic, so I'm not going to go into all of the details.
To make a long story short, you don't have to have a pixel-perfect design or target one particular resolution anymore. In the web's earlier days, before standards took root this wasn't as easy to do. In fact, it's much better if you design with the thought in mind that you won't be able to keep a pixel-perfect design and still have cross-browser, cross-platform and cross-resolution compatability. There's even another variable on top of this, the user's font size preference.
This is where CSS really shines. You can create a design with minimum and maximum dimensions. For instance, a design that expands when there is more screen real estate, and shrinks when there is less and zooms to accomodate a user's font preferences. This is called liquid design. You might think that it's done by specifying length in percentages. In reality, percentages actually don't play a large role in this. It's better to use block elements like <div> elements. Block elements use a width sizing algorithm known as expand to fit. In that light, writing:
div {
border: 1px solid black;
}
<div>
This div expands to fill all the space available to it.
</div>
This <div> fills all the space horizontally, that's because it is a block element with auto width by default. You might think that,
div {
border: 1px solid black;
width: 100%;
}
...is the same, but it isn't. That's because a percentage measurement doesn't follow the same algorithm. A percentage measurement is based on the width of the containing block. When you apply that rule in a browser you'll see that a horizontal scroll bar appears. That's because width + borders + padding + margin = size of div. 100% of the containing block (the body element), added to 2 pixels of border on both sides equals more space than is available to the div causing horizontal scroll bars.
To get the width to stop shrinking at a certain point and stop expanding at a certain point, you use the min-width and max-width properties.
div {
border: 1px solid black;
min-width: 300px;
max-width: 700px;
}
If you run this one in a browser that understands minimum and maximum widths, such as Mozilla Firefox, you'll see the <div> stops expanding when it reaches 700 pixels and stops shrinking (when you make the browser window really small) at 300 pixels.
Of course that's an oversimplified example, but it's one component of the foundation of a liquid design. These techniques can get rather complicated, and is why the CSS learning curve is much steeper than the HTML learning curve. That said, here is a link to look to for more information:
http://css-discuss.incutio.com/
That's a wiki for the CSS-Discuss mailing list, which many CSS experts contribute to.
You can also see this in a couple sites I have designed:
http://www.smilingsouls.net and
http://www.chokoloskee-island.com
View these in Firefox, expand the browser window and shrink it, then increase the font size (ctrl + + && ctrl + -), you should see the whole design scale with the font size. Internet Explorer doesn't play as nice, I've just done as much hacking as required to get these *viewable* in IE... so some of these bells and whistles don't work so well in IE. That bit with the design scaling with the font size is done using em measurements. One em unit is equal to the size of the font for that element, so if the font size is 16px, 1em = 16px.
Hope I've fed your curiousity!
Regards,
Rich
--
[
http://www.smilingsouls.net]
[
http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
page sizing
