IE 6&7 CSS issue

[JasonHenry]

Hello all. I have been pulling my hair out trying to get my website to display correctly in older IE browsers. It is designed as a 2 column layout with the left column containing 3 columns. In older IE browsers the columns do not set as 3 but ride the left - one below the other. I do not have much experience with CSS.

Here is my website.
Here is the style sheet

I don't expect someone to fix my problem, but if one of you gurus see something obvious I appreciate a few pointers. Thanks.

~Jason

[JasonHenry]

Snip of code involved:

<div id="left">

<-----SNIP------->

<?php echo '<div id="homewrapper"><div id="column1"><div id="home_category_heading">'.$cats[name].'</div>';

    $num = 0;
    while($games = mysql_fetch_array($query, MYSQL_ASSOC)){
        //echo $games['title'];
        $gameurl = $games['title'];
        $gameurl = str_replace(" ", "-", $gameurl);
        $gameurl = str_replace("'", "_", $gameurl);
        $gameurl = str_replace('"', "_", $gameurl);
        $gameurl = str_replace('/', "_", $gameurl);
        $gameurl = str_replace("\\", "_", $gameurl);

        $gameurl = rawurlencode($gameurl);
        $games['description'] = stripslashes($games['description']);

        $name = substr($games['title'], 0, 28);
        if(strlen($games['description']) > 45){
            $games['description'] = substr($games['description'], 0, 45)."...";
        }
        else {
            $games['description'] = $games['description'];
        }

        if($num == 4){
            echo '';
            $num = 0;

        }
        else {
        }
           if ($seo==yes) {
            echo'
                <div id="homepage_games">
                <a href="' . $siteurl . 'game/' . $games['id'] . '/' . $gameurl . '.html' . '">
                <img align="absmiddle" src="' . $games['thumbnail'] . '" width="60" height="60" />&nbsp;' . $name . '</a>
                </div>';
        }
        elseif ($seo==no) {
            echo'
                <div id="homepage_games">
                <a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">
                <img align="absmiddle" src="' . $games['thumbnail'] . '" width="50" height="50" />&nbsp;' . $name . '</a>
                </div>';    
        }
                               
        $num++;
    }
    ?>


    </div></div>

CSS involved:

#left {
position:relative;
float: left;
width: 688px;
color: #784d00;
padding-top: 10px;
padding-left: 8px;
overflow:hidden;
display: inline-block;
}
#homewrapper{
width:100%;
position: relative;
}
#column1{
float:left;
width:32%;
margin-right:5px;
margin-top:5px;
text-align:left;
}
#home_category_heading {
width:100%;
margin:4px;
margin-bottom:4px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#00324c;
background: #d4e2ec url('images/maincat.gif');
background-repeat: no-repeat;
background-position: top left;
padding-top: 5px;
padding-bottom: 9px;
font-size:16px;
font-weight: bold;
text-align:center;
}

By trial and error adding:

display:inline;

to

#homewrapper{
width:100%;
position: relative;
}

the columns line up. i really don't know why. I have read beaucoup pages today and have been trying everything. Any ideas?

[JasonHenry]

Adding that did fix my issue. Now I am wondering if someone can explain why that worked. What is different about the way the 2 browsers look at the css, especially IE 6/7, that this was needed. This will help me get a better grip on further enhancements and other future projects. Thanks.