IE float fix in css

<div id="simg1" style="display: inline">
<img src="images开发者_StackOverflow中文版/image.jpg">
</div>
<div id="sbdy"><a href="www.google.com">some text</a></div>

CSS Style:

#simg1 {
background-color: #fff;
    float: left;
    width: 85px;
    height: 80px;
    border-width:5px;

    border-right: solid 2px #fdd61e;
    border-left-top: solid 25px #fdd61e;
    border-left: solid 3px #fdd61e;
    border-top: solid 3px #fdd61e;
    border-bottom: solid 3px #fdd61e;
    border-radius: 15px 0px 0px 15px;
    overflow: hidden;
}
#sbdy {
background-color: #fff;
    position: relative;
    color: #000;
    float: left;
    width: 160px;
    height: 75px;
    padding: 5px 6px 0px 2px;
    border-right: solid 3px #fdd61e;    
    border-top: solid 3px #fdd61e;
    border-bottom: solid 3px #fdd61e;
    border-top-right-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;  
}

This code works fine in every browser, but in IE, the text div is showing up beneath the image. There is no problem with the width since I have tested with more width too. I have tried everything but cannot figure out how to fix this bug.

There's a double float margin bug that's neutralized with display:inline and a standards DOCTYPE. – Krof Drakula

This is the correct answer given by Krof Drakula to the my question. Had to select an answer to my question.

I would suggest looking into jquery, they usually have plugins for this.

I think depending on your IE version, they do work differently on each version. I would try playing around with the position: relative;. I had the same issue for IE7 with one of my floating div and giving a position: absolute; did the trick.