I am creating a template which I aim to use for common web site designs in the future, and I am trrying to have it as bomb proof as I can make it. I have two columns, one of which is floated, and below this is a footer with clear:both. http://www.farstyle.com/abc/2column-footer/ The footer gets a double top padding and the gap between the columns and the footer is doubled too. As you can see by the attachment, it works fine in every other browser I've tested this in, but internet explorer just fudges it. I'd love to know why it's doing this, as I have come across this before and I used an ie specific hack to overcome it, but I'd like to know what I can do without using hacks! I have already tried applying display:inline to the floated div, to no effect. Any advice appreciated!
right, I have made some progress, but not much. The double padding issue within the footer was solved by adding overflow:auto to the footer itself. The double margin issue was still present though. I removed the margins from the columns and then added it to the footer as margin-top: - this seemed to work but only in ie. In firefox (haven tested any others) the top margin was being ignored and that is where I am at right now. The reason I had originally set the two columns to both have a bottom margin was so that if one column was longer than the other then the gap between the columns and the footer would always be consistent. Not the case, the margins are added up in ie. Any ideas?