As I wrote about previously, I’m using a a flexible layout, constrained using min and max widths and displaying the columns using display: table-cell;. This was mostly working fine in both Mozilla and Opera until I needed to use pre as in my last post. This caused a stange bug in Firefox where the main content column was pushing the side bar outside the edge of the container, which looked really strange. It didn’t always happen — it could sometimes be fixed by simply reloading the page, but not always and was quite frustrating.

I’ve finally come up with the most acceptible solution, after trying everything else I could think of. In the end I was tossing up between setting a fixed width on the entire content, or setting a fixed width on the pre element. Both had their disadvantages, but I ended up setting a fixed width on the pre element because it had the least impact on the overall design.

I’m quite sure it’s a bug in Firefox that was causing it, as it was not occuring in Opera. I’ll file a bug later, but first I have to do some more tests to determine exactly what was causing it, and how to replicate it. If anyone has any ideas, or can come up with a solution that allows both the container and pre elements to be flexible, that would be good, but for now this will have to do.