# Neat style trick

**URL:** <https://www.ruby-forum.com/t/neat-style-trick/56678>\
**Category:** Rails\
**Created:** [April 2, 2006, 6:32pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678 "2006-04-02T18:32:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 6:32pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/1 "2006-04-02T18:32:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 7:01pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/2 "2006-04-02T19:01:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 7:23pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/3 "2006-04-02T19:23:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 7:49pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/4 "2006-04-02T19:49:20Z")

</div>

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](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](http://blog.hasmanythrough.com)

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 8:12pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/5 "2006-04-02T20:12:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 8:53pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/6 "2006-04-02T20:53:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![al-evans](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/54ee81/32.png) [@al-evans](https://www.ruby-forum.com/u/al-evans)\
**Post date:** [April 2, 2006, 7:50pm UTC](https://www.ruby-forum.com/t/neat-style-trick/56678/7 "2006-04-02T19:50:58Z")

</div>

Agreed–but it depends on your priorities.

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