I personally don’t think there is anything more frustrating than spending hours troubleshooting something only to find that one line of code is all that is needed to fix it. This is the recap of my day today: I had a great tableless designed site that seemed to hold up against everything I threw at it. Then I put in a page that had a table in it and all hell broke loose.

I don’t know why, but tables interact with CSS layouts in a very different way than any other code. For some reason it moved the table all the way to the left and pushed down the other two columns to the left of it. I started trying different numbers, then different CSS, then child selectors on just the tables, but nothing worked. I remembered in the back of my mind that IE always needed a width, so I started looking at my columns. They all had width, but I put my content within another div to get around the box model issue, and didn’t declare a width in my inner div. Once I put “width:100%” on my inner div the table snapped into place. Don’t you just LOVE Internet Exploder? I do, I do!!!

One additional note: If you are using PerForms or anything else that puts a table in a form then you will need to add width:100% to the form as well.