I have the following example code

Code:
<head>
<style type="text/css">
div#outerbox {
width: 418px;
min-height: 80px;
margin-left: 4px;
margin-top: 5px;
border: 1px solid orange;
}

span.photo {
float: left;
width: 60px;
height: 60px;
border: 1px solid green;
margin-top: 10px;
margin-left: 10px;
}

div#post1 {
float: right;
width: 335px;
margin-top: 10px;
margin-right: 2px;
border: 1px solid lightgrey;
}

div#addReply1 {
float: right;
width: 330px;
text-align: right;
border: 1px solid pink;
}
</style>
</head>
<body>

<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'></div>
  <div id='addReply1'></div>
</div>
<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'>
    I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...<br />
    The orange outdiv also needs to stretch as it's doing when viewed in IE6.
  </div>
  <div id='addReply1'></div>

</div>
</body>
Basically i need it to look exactly the same in all browsers as it looks now in IE6

There's 2 examples above, 1 showing without any text in the div and the other showing what should happen when those divs have content (Viewed in IE6) - i need this to work in all the major browsers.

Anybody help?