IE issue with right column dropping below floated left on resize

[Sean_Burgess]

Hello all,

I'm having a problem with a new layout I'm setting up. Here is an example page - http://www.idsa.org/index_new.htm

Page looks fine in Safari and Firefox, but in IE the whole DIV called main_body drops down below the one named sidebar if you resize the page so that it is narrower than the wrapping DIV called content_wrapper.

I've seen a lot of people having the same issue, but haven't been able to implement any fixes that actually work yet. What am I doing wrong?

Here's my style sheet:


@charset "UTF-8";
/* CSS Document */

<style type="text/css">

#outerWrapper {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(../images_new/Header_Background.jpg);
background-repeat: repeat-x;
height: 93px;
width: 100%;
}
#header_content {
width: 1050px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
}
#contentWrapper {
width: 1050px;
overflow: hidden;
float: left;
}td img {display: block;}#Media_Box img {
margin-right: 5px;
}
td img {display: block;}
#main_body {
width: 882px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 130px;
padding-right: 15px;
padding-left: 24px;
padding-top: 20px;
padding-bottom: 20px;
}
#Front_Page_Headlines {
width: 325px;
height: auto;
float: left;
background-image: url(../images_new/Latest_IDSA_News.jpg);
background-repeat: no-repeat;
padding-top: 30px;
}
#Front_Top_Content_Wrapper {
width: 100%;
height: auto;
overflow: hidden;
}
#Horizontal_Divider {
background-image: url(../images_new/Horizontal_Divider.jpg);
background-repeat: no-repeat;
height: 30px;
width: 839px;
}
#footer {
background-image: url(../images_new/Footer_Background.jpg);
background-repeat: repeat-x;
height: 68px;
width: 100%;
margin-top: 20px;
clear: both;
}
#footer_content {
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 130px;
height: 48px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
padding-top: 20px;
padding-left: 24px;
}
#footer_content a {
color: #FFF;
text-decoration: none;
}
#footer_content a:hover {
color: #CCC;
text-decoration: underline;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000;
}
#sidebar {
float: left;
width: 130px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
color: #333;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #000;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #900;
}
.Latest_News_Summary {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#main_body a {
font-weight: bold;
color: #900;
text-decoration: none;
}
#main_body a:hover {
font-weight: bold;
color: #900;
text-decoration: underline;
}


</style>

#Front_Top_Divider {
background-image: url(../images_new/Vertical_Spacer.jpg);
height: 325px;
width: 3px;
padding-right: 5px;
padding-left: 5px;
float: left;
}
#Front_IDEA_Image {
height: 397px;
width: 503px;
margin-left: 338px;
}
#Front_Bottom_Content_Wrapper {
width: 100%;
height: auto;
overflow: visible;
}
#Front_Bottom_Left_Column {
width: 325px;
float: left;
}
#Media_Box {
background-image: url(../images_new/Media_Box_Header.gif);
background-repeat: no-repeat;
width: 315px;
border: 1px solid #333;
background-color: #94C00E;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top: 55px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#Front_Bottom_Right_Column {
width: 478px;
margin-left: 370px;
background-image: url(../images_new/Intro_Header.jpg);
background-repeat: no-repeat;
padding-top: 80px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
#Poll {
width: 100%;
background-image: url(../images_new/Poll_Header.jpg);
background-repeat: no-repeat;
padding-top: 30px;
margin-top: 20px;
height: auto;
}
#Twitter_Feed {
width: 100%;
background-image: url(../images_new/Twitter_Header.jpg);
background-repeat: no-repeat;
padding-top: 30px;
margin-top: 20px;
height: auto;
}
#twitter_div {
list-style-type: none;
}
#twitter_div li {
list-style-type: square;
padding-bottom: 10px;
}
#Intro {
width: 100%;
font-size: 16px;
}
#Member_Box {
background-image: url(../images_new/Member_Box_Header.jpg);
background-repeat: no-repeat;
width: 458px;
background-color: #FF903A;
margin-top: 20px;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
height: 300px;
border: 1px solid #A5581F;
}
#Social_Networks {
height: 39px;
width: 478px;
margin-top: 30px;
}
#Member_Box_Left_Column {
float: left;
width: 230px;
padding-right: 10px;
height: auto;
}
.Latest_News_Headline {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #900;
}
#Member_Box_Right_Column {
height: 300px;
width: 218px;
margin-left: 240px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#Member_Divider {
background-image: url(../images_new/Member_Divider.jpg);
float: left;
height: 300px;
width: 10px;
}
h5 {
font-size: 14px;
}
.Member_Box_Text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#Member_Box_Right_Column img {
margin-right: 5px;
}
#Member_Headlines {
width: 325px;
height: auto;
float: left;
background-image: url(../images_new/Latest_Member_News.gif);
background-repeat: no-repeat;
padding-top: 30px;
}
#Media_Headlines {
width: 325px;
height: auto;
float: left;
background-image: url(../images_new/Latest_Media_News.gif);
background-repeat: no-repeat;
padding-top: 30px;
}
#subNav_Member {
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 142px;
padding-right: 15px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 20px;
}
#subNav_Public {
width: 810px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 243px;
padding-right: 15px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 20px;
}
#Member_Box_Public {
background-image: url(../images_new/Public_Member_Box_Header.jpg);
background-repeat: no-repeat;
width: 458px;
background-color: #FF903A;
margin-top: 20px;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
height: 330px;
border: 1px solid #A5581F;
}
#subNav_Media {
width: 710px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 344px;
padding-right: 15px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 20px;
}
#Promotions_Advertising_Box {
background-image: url(../images_new/Promotions_Advertising.gif);
background-repeat: no-repeat;
width: 305px;
border: 1px solid #333;
background-color: #94C00E;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 35px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#Member_Box_Media {
background-image: url(../images_new/Member_Box_Header_Media.jpg);
background-repeat: no-repeat;
width: 458px;
background-color: #FF903A;
margin-top: 20px;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
height: 300px;
border: 1px solid #A5581F;
}
#Image_Download_Box {
width: 100%;
background-image: url(../images_new/Media_Image_Download_Header.gif);
background-repeat: no-repeat;
padding-top: 30px;
margin-top: 20px;
height: auto;
}
.Right_Sidebar {
background-color: #A1A5BA;
padding: 10px;
float: right;
width: 200px;
}
.SmallText {
font-size: 10px;
}

[Sean_Burgess]

And here's the page:

And here's the page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Redesign_Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>IDSA - The Industrial Designers Society of America</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
-->
</style>
<link href="css/idsa_template_styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- InstanceParam name="subNav" type="boolean" value="false" -->
</head>

<body onload="MM_preloadImages('images_new/Contact_Us_Button_f2.jpg','images_new/Search_Button_f2.jpg','images_new/Public_Button_f2.jpg','images_new/Members_Button_f2.jpg','images_new/Media_Button_f2.jpg','ProjectInfusion/images/Front_Page_Feature_Image_503_f2.jpg')">
<div id="outerWrapper">
<div id="header">
<div id="header_content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1050" height="93" id="FlashID" title="">
<param name="movie" value="Flash/IDSA_Flash_Header.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/IDSA_Flash_Header.swf" width="1050" height="93">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="IDSA_Redesign_Top_Nav.png" fwpage="Page 1" fwbase="IDSA_Redesign_Top_Nav.jpg" fwstyle="Dreamweaver" fwdocid = "363837300" fwnested="0" -->

<tr>
<td><img src="images_new/spacer.gif" width="130" height="1" border="0" alt="" /></td>
<td><a href="http://www.idsa.org/absolutenm/templates/?a=60&amp;z=171"><img src="images_new/Contact_Us_Button.jpg" alt="" name="Contact_Us_Button" width="81" height="93" border="0" id="Contact_Us_Button" onmouseover="MM_swapImage('Contact_Us_Button','','images_new/Contact_Us_Button_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><img name="IDSA_Redesign_Top_Nav_r1_c3" src="images_new/IDSA_Redesign_Top_Nav_r1_c3.jpg" width="6" height="93" border="0" id="IDSA_Redesign_Top_Nav_r1_c3" alt="" /></td>
<td><a href="absolutenm/IDSA_Search.aspx"><img src="images_new/Search_Button.jpg" alt="" name="Search_Button" width="66" height="93" border="0" id="Search_Button" onmouseover="MM_swapImage('Search_Button','','images_new/Search_Button_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><img src="images_new/spacer.gif" width="355" height="1" border="0" alt="" /></td><td><a href="public/index.html"><img src="images_new/Public_Button.jpg" alt="" name="Public_Button" width="103" height="93" border="0" id="Public_Button" onmouseover="MM_swapImage('Public_Button','','images_new/Public_Button_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

<td><a href="members/index.html"><img src="images_new/Members_Button.jpg" alt="" name="Members_Button" width="154" height="93" border="0" id="Members_Button" onmouseover="MM_swapImage('Members_Button','','images_new/Members_Button_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><a href="media/index.html"><img src="images_new/Media_Button.jpg" alt="" name="Media_Button" width="155" height="93" border="0" id="Media_Button" onmouseover="MM_swapImage('Media_Button','','images_new/Media_Button_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><img src="images_new/spacer.gif" width="1" height="93" border="0" alt="" /></td>
</tr>
</table>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</div>
</div>
<div id="contentWrapper">
<div id="sidebar"><a href="index.htm"><img src="images_new/IDSA_Logo.gif" alt="IDSA Logo" width="130" height="247" border="0" /></a><br />
<a href="https://www.netforumondemand.com/eWeb/DynamicPage.aspx?Site=IDSA&amp;WebCode=LoginRequired"><img src="images_new/myIDSA_Graphic.gif" alt="myIDSA" width="130" height="87" border="0" /></a> </div>

<div id="main_body"><!-- InstanceBeginEditable name="Body" -->

<div id="Front_Top_Content_Wrapper">
<div id="Front_Page_Headlines">

<!-- front page items --><script language="JavaScript" src="http://www.idsa.org/absolutenm/xlaabsolutenm.aspx?z=164"></script>

<!-- <h3>IDEA 2008 People's Choice Awards</h3>
<p>VOTE NOW! Pick your favorite Gold winner by September 13! </p>
<h3>IDSA and BusinessWeek Announce IDEA 2008 Winners</h3>
<p>205 awards given to the most innovative designs. More international winners than ever before. Two &quot;Best in Show&quot; awards. See the breadth and depth of design excellence for yourself!</p>
<h3>Polar Opposites: IDSA's 2008 National Conference</h3>
<p>REGISTER NOW for this can't miss event @ Phoenix's Arizona Biltomore, Sept. 10-13! </p> -->
</div>
<div id="Front_IDEA_Image" align="right"><!-- <script language=JavaScript src=http://www.idsa.org/absolutebm/abm.aspx?z=116></script> -->
<a href="ProjectInfusion/index.html"><img src="ProjectInfusion/images/Front_Page_Feature_Image_503.jpg" width="503" height="397" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','ProjectInfusion/images/Front_Page_Feature_Image_503_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="Horizontal_Divider"></div>
<div id="Front_Bottom_Content_Wrapper">
<div id="Front_Bottom_Left_Column">
<div id="Media_Box">
<h4>Recent Additions</h4>
<p><img src="images_new/Audio_Icon.jpg" alt="Audio Icon" width="25" height="25" align="left" /><a href="http://www.idsa.org/absolutepc/default.aspx?a=7&amp;c=0&amp;k=">Larry Hoffer Interviewed on Customer Experience Podcast</a><br />
IDSA Deputy Executive Director and COO, Larry Hoffer, gives a guided tour of the IDEA Gallery during the IDSA National Conference, Polar Opposites '08.</p>
<p><img src="images_new/Audio_Icon.jpg" alt="Audio Icon" width="25" height="25" align="left" /><a href="http://www.idsa.org/absolutepc/default.aspx?a=3&amp;c=0&amp;k=">Alistair Hamilton Has Big IDEAs</a><br />
Microsoft's Alistair Hamilton talks about his role leading the 2008 IDEA Jury.</p>
<p><img src="images_new/Audio_Icon.jpg" alt="Audio Icon" width="25" height="25" align="left" /><a href="http://www.idsa.org/absolutepc/default.aspx?a=4&amp;c=0&amp;k=">Frank Tyneski Talks: February 2008</a><br />
Frank Tyneski became the new executive director of IDSA in October 2007. But who is Frank? And what is his vision for IDSA?</p>
</div>
<div id="Poll">
<script language="JavaScript" src="http://www.idsa.org/absolutepm/xlaabsolute.asp?p=3"></script>
</div>
<div id="Twitter_Feed"><div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>
</div>
</div>
<div id="Front_Bottom_Right_Column">
<div id="Intro">
<h2>Welcome To IDSA's New Home On The Web</h2>
<p>Whether you're looking to get the most out of your membership, connect with fellow members, find a designer, learn more about industrial design (and where to study it), register for an event, find a press source or just figure out what's going on at IDSA, you can do it here.</p>
</div>
<div id="Member_Box">
<div id="Member_Box_Left_Column">
<h5>Find your dream job in industrial design in IDSA's targeted employment listings.</h5>
<p>
<script language="JavaScript" src="http://www.idsa.org/absolutenm/xlaabsolutenm.aspx?z=165"></script>
</p>
</div>
<div id="Member_Box_Right_Column">
<div id="Member_Divider"></div>
<h4>Member Spotlight</h4>
<p><img src="images_new/Member_Front_Page.jpg" width="60" height="80" align="left" /><a href="http://www.idsa.org/absolutenm/templates/?a=3842&amp;z=166">Maruja Fuentes</a><br />
She took the 2008 ICFF by storm with her leaning mold design that mixes biomimicry with architecture to provide a new solution for how public resting spaces can be constructed. Meet Maruja Fuentes, IDSA.</p>
<h4>Search IDSA Membership</h4>
<p>When the new member database comes online, you'll be able to search membership here!</p>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="textfield" type="text" id="textfield" size="20" />
</label>
<label>
<input type="submit" name="button" id="button" value="Go" />
</label>
</form>
<p>&nbsp;</p>
</div>
</div>
<div id="Social_Networks"><img src="images_new/Social_Network_Logos.jpg" alt="IDSA Social Networks" width="478" height="39" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="121,6,200,32" href="http://twitter.com/IDSA" target="_blank" alt="Follow IDSA on Twitter" />
<area shape="rect" coords="212,6,295,34" href="http://www.linkedin.com/groups?gid=40079" target="_blank" alt="Follow IDSA on Linked In" />
<area shape="rect" coords="305,4,385,34" href="http://www.plurk.com/IDSA" target="_blank" alt="Follow IDSA on Plurk" />
<area shape="rect" coords="401,4,475,30" href="http://www.facebook.com/group.php?gid=58742304771" target="_blank" alt="Follow IDSA on Facebook" />
</map>
</div>
</div>
</div>

<!-- InstanceEndEditable --></div>
</div>
<div id="footer">
<div id="footer_content"><!-- #BeginLibraryItem "/Library/Redesign_Footer_Menu.lbi" --><a href="http://www.idsa.org/absolutenm/templates/?a=80&z=171">about IDSA</a> | <a href="http://www.idsa.org/absolutenm/templates/?a=3961&amp;z=171">join now</a> | <a href="http://www.idsa.org/absolutenm/templates/?a=60&amp;z=171">contact us</a> | <a href="https://www.netforumondemand.com/eWeb/StartPage.aspx?Site=IDSA">search members</a> | <a href="Connexx/index.html">connexx</a> | <a href="#">site map</a> | <a href="#">privacy policy</a><br />
IDSA &copy;
<script language = 'JavaScript' type="text/javascript"> type="text/javascript"
now = new Date
theYear=now.getYear()
if (theYear < 1900)
theYear=theYear+1900
document.write(theYear)
</script><!-- #EndLibraryItem --></div>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/IDSA.json?callback=twitterCallback2&amp;count=3"></script>
</body>
<!-- InstanceEnd --></html>

[Sean_Burgess]

Bump.

I'd really appreciate any help with this.

Thanks.

[VIPStephan]

Hmm, well, I can’t really check this right now but I’d suggest you put a border around the elements that cause problems. And then most of the time the reason for an issue in IE is the presence or absence of hasLayout (http://satzansatz.de/cssd/onhavinglayout.html).

And P. S.: You’ve forgotten to specify a background color for your page. My default browser background isn’t white, that’s why I notice.