I am reffering to my new site http://www.wishtotravel.com . The site was originally designed by a friend web designer, but after a tragic event, he had to abandon the project, so its up to me to fix the remaining bugs, but i'm no CSS expert. Please have a look the above site in Firefox, i.e. 6 and i.e. 7 to see what I mean. Site is designed for a 1024px monitor.
The correct display is what appears in i.e. 6. You can see that there is a space of approximatly 5 pixels between the left panel and right panel. The current CSS settings for these are as follows:
In Firefox we get that same space, but the pannels themselves are far too wide and expand depending on the size of the browser.
That's because .mainbox's width is set at 100%, not a fixed-pixel width. And your percentages don't add up to 100 so that's why you've got space left over in the middle. You shouldn't be mixing % widths and pixel margins either - use the same unit for both.
The reason the gap is different between IE6 & 7 could be because of the double-margin bug. Add display: inline to the floats and see if that resolves it.
Browser-sniffing like that's not a reliable practice. What you should do instead is serve up the same stylesheet to all browsers and then use hacks within that main stylesheet or IE conditional comments to serve different rules to IE to overcome its bugs. You shouldn't need completely separate layout rules for Firefox et al and IE based on what you have at the moment.