Can't figure out this CSS "white gap" issue! HELP!

[ShootingBlanks]

Hello.  My page looks fine in IE7 & FireFox, but in IE6 there's a big white gap on the page.  Here's screenshots of how it should look (in IE7 & FireFox) and then how it shouldn't look (in IE6), and then below it is a description of the CSS code I'm using.  Any help would be greatly appreciated.  Thanks!!!

 

IE7/FireFox:

 

IE6:

 

That whole category on the right that has the "Business Management" heading and the table is in a div with the ID "main" like this:

#main {
float: right;
width: 535px;
margin: 8px;
}

 

Then the navigation bar on the left side is in a div with the ID "sidebar" like this:

#sidebar p {
margin: 15px;
}

 

Both the "sidebar" and "main" divs are in a div with the ID "container" like this:

#container {
width: 698px;
border: 4px double #095AA6;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}

 

Now, here's kind of another problem.  At the top of the page (also within the "container" div) are two more divs with the IDs "header" and "nav".  Here's those codes:

#header {
padding: 0;
margin: 0;
width: 100%;
height: 55px;
background: url(../images/header.jpg) no-repeat;
color: #FFF;
}

#nav {
padding: 0;
margin: 0;
height: 17px;
border-width: 5px 0 5px 0;
border-color: #FFCC00;
border-style: solid;
background-color: #9CBCDA;
color: #330066;
}

 

Now, I tried decreasing the "width" attribute in the "main" ID from 535 to 525, and that cleared up the big white gap, but then it left a white gap on the top-right (next to the "header" and "nav").  This is only (again) in IE6, and can be seen in this screenshot:

 

Any ideas anyone???  Thanks!!!

 

[sKunKbad]

add

 

display:inline;

 

to

 

#main

[ToonMariner]

don't give your container a width - just give it a margin-left to clear the nav panel.

[ShootingBlanks]

Is it possible to have both IE7 and IE6 installed on the same computer at once?  If so, how?  Because, for testing, I have to keep running to different computers around my office.  Thanks!...

 

[ToonMariner]

yep...

 

get ie 7 on and then get this multiple ies

[ShootingBlanks]

add

 

display:inline;

 

to

 

#main

 

I added the display:inline to #main like you said, and nothing changed.  But when I tried adding it to #sidebar, that got rid of the big white gap, but I still have the white gap on the top-right (like in the last picture of my original post)...

 

 

[ShootingBlanks]

Here's the link again, for reference:

 

http://www.shootingblanks.net/TEMP/php/SalesRepository/categoryIndex.php?catID=1

 

 

[ShootingBlanks]

NEVERMIND!!!...

 

...it turns out that I had to add the display:inline; code to BOTH the #main AND the #sidebar.  Now it works!!!

 

[sKunKbad]

display:inline fixes an IE6 bug that occurs when floated divs have margins or padding. IE6 can double the padding or margin in some cases, which obviously breaks the layout. I think the rule is, if the div is floated left, and the padding or margin is on the left, then it will be doubled. Remembering this is one of the keys to making cross browser designs work.