Friday, December 4, 2009

CSS Frustrations

A gibbous moon 95% full bright over the western horizon, while the sun rise paints the mountain the color of salmon in the east. Lovely, but cold.

CSS can be frustrating, sometimes. I spent way too much time yesterday trying to get my columns to be of equal length with variable content. By default columns are only as long as the content in them. There is a trick you can use, but it involves making a separate container div for each column and then offsetting the columns off screen and pushing the text back on screen over the containing divs. It is complicated and messy. It results in the appearance of equal length columns, but has some other drawbacks. For one you can no longer center the outside container in the body because of its offset.

In the end, after hours of work I resorted to cheating. I set a minimum height for each column and if I needed it larger I manually set the height in the page itself. This is bad in terms of maintainability, flexibility, and extensibility. I will revisit it again. A simple solution is not to have a background color in the second column. If the background of the container is white and everything in the container is white, it looks as if both columns are the length of the container. It is just not as pretty.

Anyway, I would rather contemplate the moon, I think, waning into December.

1 comment:

  1. Hey Steve, I know this may be a little late in the day and you've probably moved on to other things, but there are better ways to get your columns to line up. I don't have them memorized because I just keep copying and pasting them from one web site to the next. Next time I'm mucking around in my code, I'll grab a sample and paste it back here.

    ReplyDelete