Neat style trick


#1

Not terribly exciting, but I was happy to think of it.

I needed a div with a fixed height that could vary depending on page
content.

So I did this:

Whee!

–Al Evans


#2

On Sun, Apr 02, 2006 at 06:32:58PM +0200, Al Evans wrote:
} Not terribly exciting, but I was happy to think of it.
}
} I needed a div with a fixed height that could vary depending on page
} content.
}
} So I did this:
}
}

Very nice, but I have a recommendation. It’s best to give heights and
widths (and occasionally margins and paddings, though not usually) in
exes
and/or ems. If your user has set a larger (or smaller) font, or uses
Firefox’s ctrl-plus and ctrl-minus to change the font size, a
pixel-sized
box will truncate things or scroll or otherwise look wrong, whereas an
ex-
or em-sized box will adjust to fit the text.

} Whee!
} --Al Evans
–Greg


#3

I’m curious – if the height is determined by page content, couldn’t
you just let the contents of the page determine the height?


#4

Al Evans wrote:

Not terribly exciting, but I was happy to think of it.

I needed a div with a fixed height that could vary depending on page
content.

So I did this:

Whee!

That’s cute. If you want to do that sort of thing in the CSS file, you
can make an ERb template to generate the CSS too:

http://blog.hasmanythrough.com/articles/2006/03/23/dirt-simple-rcss-templates

Though your particular example probably isn’t a great one to generate
CSS for a view where the div height will change each time you look at
it.


Josh S.
http://blog.hasmanythrough.com


#5

Gregory S. wrote:

Very nice, but I have a recommendation. It’s best to give heights and
widths (and occasionally margins and paddings, though not usually) in
exes
and/or ems. If your user has set a larger (or smaller) font, or uses
Firefox’s ctrl-plus and ctrl-minus to change the font size, a
pixel-sized
box will truncate things or scroll or otherwise look wrong, whereas an
ex-
or em-sized box will adjust to fit the text.

In general, I agree. In this case, the height of the individual element
is determined by the (fixed) height of a picture.

gravy face wrote:

I’m curious – if the height is determined by page content, couldn’t
you just let the contents of the page determine the height?

This is a display: hidden; container for an arbitrary number 1…10 of
float: left; elements. According to my tests (FireFox only so far), the
container thinks they’re all on the same line. But I’m no CSS guru.

–Al Evans


#6

Do you have any documentation references on this? Methinks this is an
urban legend. I have
been using em as my primary unit for years and have seen no ill effects.

My general rule of thumb – and I’ve seen it recommended elsewhere – is
to a) set the
body font size with ems and then use percentages for font-size on all
child elements and
b) use em for all margin/padding/widths that need to expand to
accomodate font size
changes and use px for those that should not expand with font size.

b


#7

Agreed–but it depends on your priorities.

Browser support for ems (e.g. IE) is much sketchier.