Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

Scripsit Harris Kosmidhs:

No, the point is to avoid setting widths, letting browsers select the
widths. Of course, in _some_ cases you might set _some_ width.

First, your class names are poor. They refer to your intended layout, not to
the meanings of the blocks. Second, you are apparently trying to imitate
frames and waste about 30 % of available width (which might be less than you
imagine) to "navigation". While this is not (yet) judged as a mortal sin,
it's bad practice, and as you realize it one day, you'll realize how poor
the class names like "left" are.

It wastes more space than you can afford. So don't put such an image there.

In _fluid_ layout, you don't. If a block contains an image that is 250
pixels wide, this apparently sets a minimum width for the block, and other
factors probably cause that will also be the maximum width.

If problems recur, post the URL.

As a gross simplification.

Then a _totally_ fluid layout is inappropriate for you in this case
(this isn't unusual).

min-width is a useful property here to give a robust layout that's
still highly fluid. Of course, guess which browser doesn't support
it....

Other techniques are to start nesting <div>s and fix the widths of the
inners, letting the outers follow percentage sizes, and letting the
browsers fight it out. Generally the results are acceptably good, but
no-one claims they're perfect.

This stuff is hard to do well. I suggest reading the source of some of
the better tutorials out there (try glish.com or bluerobot) and seeing
the issues they've had to deal with.

PS = "left" is fine as a class name, so long as you understand what
you're doing. If you really mean "Get the damned thing onto the left if
at all possible" then it's reasonable. If you can re-state it more
generally as "where the major nav menu lives" then it might be better
to give it a class name like that. Remember that sometimes your "left"
is going to find itself rendered at the top of the page anyway (on my
skinny-screened phone, for instance) -- can you live with this?

Conversely, it's better to have a class called "left" if you're really
using this as a "presentational bucket" <div> in the HTML where you
collect all those things you want to force in that direction, whether
they're menus or stock tickers (you might have a further element inside
there that is called "nav-menu"). It's better than having a bucket,
calling it something like <div class="nav-menu">, using the CSS to
float it leftwards, and still having all sorts of baggage in there
that's anything but a nav-menu.

Base your class names on what you're doing with the HTML and what the
_essence_ of how you're using the HTML is. Think about the results of
applying your CSS to them as very much secondary to this. But if the
function of the HTML element is still purely presentational (and
sometimes it just is), then don't be afraid of putting anodyne
presentational names on it.