The Floating IE Problem

float ie

[carltonc]

Hey guys, it's my first time posting on here - but I'm in some real need of help!

Everyone's had the IE float problem before, but I can't seem to fix it even though I have tried almost every hack I know.

The following is a chunk of my code, followed by it's stylesheet...

Any help would be great!

 <div id="newsitem">
  
  <div id="left">
   
   <img src="uploads/news/small_<?php echo $img; ?>" alt="<?php echo $imgcaption; ?>" title="<?php echo $imgcaption; ?>" />
    
   </div>
   
   <div id="right">
   
    <h1><a href="#"><?php echo $headline; ?></a></h1>
    <h2><strong>Added:</strong> <?php echo $added; ?></h2>
    
    <p><?php echo $taster_strip; ?></p>
    
    <p style="margin-bottom:0; padding-bottom:0;"><a href="#">Read All &raquo;</a></p>
   
   </div>
   
   <div style="width:482px; clear:both; height:0px; font-size:0;"></div>
  
  </div>

Stylesheet :

#left-home #newsitem {
width:462px;
margin:0 auto;
border:1px solid #E2E2E2;
padding:10px;
margin-bottom:10px !important;
}
#left-home #newsitem #left {
width:137px;
margin-right:10px;
float:left;
}
#left-home #newsitem #right {
width:315px;
float:left;
}

The basic problem is that the div is way bigger than I have specified - it works fine in Firefox/Opera but in IE it throws all the other divs around it out because of its extra width!

:(

[quartzy]

You need to give each div an id,then reference the id's in the css you seem to have too many id's to see what is going on. Remove the style from the 462px div.

[carltonc]

Hmm, I tried that but it didn't work.

I started from scratch, and now it seems to work! :)