Making Things Work or Doing Them Right

When I'm trying to figure out how to get my CSS styles to render properly there are usually a number of possible solutions that “work”. I sometimes have trouble deciding which one is the best: the one with the most concise CSS? The one with the least entanglement with the HTML? It can be hard to know which way is “right”.

While I was working on the portfolio on this site, I had a problem like this. I wanted to float the screen shot to the left so the text would wrap around it, but I had to get the container for each screenshot/description to actually encapsulate them so its external spacing would line up properly. The usual way I knew to do it was to put another element in there that cleared the float so the container would be forced down where I want it. However this seems hackish and entangles the display with the content more than I like, so I looked for a better way. I found a page on the subject of clearing floats and immediately I could see that the solution described there was the “right” way to do it. It's simple, unentangling, and above all it works. This is one I'll have to remember for next time.