

Make element height inversely proportional to width- pure css - woah
http://jsfiddle.net/3tzL4/1/

======
jdavid
Maybe you can explain a bit better what this does?

It looks like the content is resizing in chrome based on the number of
characters in the :before tag. is that right?

So in this case the width is a percentage of the total, but the height is
determined by the total number of chars in the :before

~~~
woah
Yea, the width is a percentage. It's meant to simulate a fluid grid. I'm
working on a site right now that has a row of boxes with excerpts of longer
articles. I would like them to all have the same height for neatness, but I
don't want to set an explicit height because I would like them to resize to
contain roughly the same amount of text at different widths.

So the :before pseudoelement on #container has a bunch of _'s and spaces that
reflow like any text will. #element has the actual content, and is absolutely
positioned to the edges of its parent.

So as the width changes, the text in the :before element reflows and expands
#container's size. #element simply follows the size of #container. The :after
pseudoelement is just there for decoration.

