problem with flexible header (css) in IE 6

Hi I 've attached the html & css for this page, basically the page is flexible,
butin IE "headerimg right" moves down underneath the lefthand image when I
resize the browser. In all other browers (well our target ones) its fine, it
stops the correct distence away from the left hand image.
Does anyone have any thoughts o nsolving this in IE 6..
Many Thanks
the css is:

#content {
padding: 10px;
margin-left: 230px;
border-left: 1px solid #006;
}

#header {
background-image: url(../images/middleline_03.gif);
color: #006;
border-bottom: 1px solid #006;
padding-bottom:0px;
margin-bottom:0px;
height:65px;
}

#headLeft{
width:301px;
float:left;
display:inline;
}
#headRight{
margin-left: 305px;
text-align: right;
}
#headRight img{

}
/* end layout styles */


/*misc clasees */
.clearMe {
clear: both;
}

<div id="header">
<div id="headLeft"><img src="images/leftHeaderImg.gif" width="301"
height="65"></div><div id="headRight"><img src="images/RightHeaderImg.gif"
width="409" height="65"></div>
</div>
<div class="clearMe"></div>
<div id="nav">left menu will go here.
</div>

<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
</div>

As far as I can tell, this behavior is correct. IE is honoring the
305px left margin, so when the width of the browser window is less than
all the elements with their padding and margin, it compensates by
moving the right div down.

I suspect the problem is in how IE handles the height and width of the
#header. No width is specified, so IE makes assumptions. If you
specify width as 100%, the result is the same. If you specify width at
1015px, IE honors that and does not move the right img down. Of course
now you top banner doesn't expand when the window is larger than 1015,
which I'm guessing is not what you want.

Apparently because IE has conflict with the height of #header and the
margins of #headRight, it honors margins first. Bad implementation of
CSS, which is no surprise.

What are you trying to accomplish? do you want to force the right image
to be at least 305px from the left img? or do you want the right image
to always be on the right side (if so use float:right instead of
text-align:right)? Let me know what you want to happen and maybe I can
come up with some way to make it work in IE. IE6 is much better with
CSS the previous versions, but still gives me trouble on a regular
basis.