Floats och försvunna bilder

Lite mysko fel och buggar som jag skulle behöva ha hjälp med.

När jag kollar sidan i Firefox och Opera funkar allt fint, inte helt oväntat så strular IE :(

På sidan har jag en div som omsluter ytan där en artikel ska skrivas ut [#maincont], till höger om texten ligger det en div [#rightcol] som visar lite info om artikeln osv. Problemet är att om #rightcol har mer innehåll än själva artikeln, alltså om den sträcker sig längre ner än det finns text så lägger den sig över allt som kommer under. Men i Firefox och Opera så sträcks istället #maincont och anpassar längden efter #rightcol, som jag vill.

Skriver jag en div som ligger i samma höjd som #rightcol så lägger den sig bakom istället för att anpassa sig mellan vänsterkanten och början på #rightcol, går det att göra något åt?

Hur löser man detta? Sätter jag en clear:both; i #rightcol så börjar ju texten under istället för att flyta som den ska.

Ett annat problem är att om jag skriver ut bilder till artikeln så visas enbart centrerade bilder [detta händer bara i IE], det verkar som om att de andra bilderna helt enkelt blir osynliga, det syns att det ska vara något där eftersom det blir ett tomrum i samma storlek som bilden men inget visas. I källkoden skrivs de ut korrekt.

Den del av sidan som visar texten ser ut såhär:

<div id="maincont">

<h4 class="titlebg">Någon titel</h4>
<div class="box">

    <div id="rightcol">
      <h4 class='titlebg'><b>Rubrik</b></h4>
        <div class='readnfo'>
          Lite text här som sträcker sig några rader.
        </div>
    </div>

    <h3 style="margin-bottom:1px;">Rubrik</h3>
    <br />

    En hiskligt massa text och bilder.

    </div>
</div>

Bilder som ligger i texten kan se ut såhär:
Centrerade:
<center><img src="/inc/img/blank.jpg" alt="blank" class="piccenter" /></center>
Vänsterstäld:
<img src="/inc/img/blank.jpg" alt="blank" class="picleft" />
Högerstäld:
<img src="/inc/img/blank.jpg" alt="blank" class="picright" />

CSS:

#maincont {
 padding:7px 7px 7px 6px;
 position:relative;
}
.box {
 border:1px solid #000;
 padding:5px 5px 5px 5px;
 background-color:#fff;
 overflow: auto;
 margin-bottom:10px;
}
#rightcol {
width:130px;
border-top:0;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
float:right;
font-size:10px;
position:relative;
clear:both;
margin:0px 0px 5px 5px;
}
.readnfo {
margin:3px;
}
.piccenter {
border:1px solid #000;
padding:3px;
width:100px;
height:140px;
}
.picleft {
border:1px solid #000;
padding:3px;
width:100px;
height:140px;
float:left;
margin-right:3px;
}
.picright {
border:1px solid #000;
background-color:#efefef;
padding:3px;
width:100px;
height:140px;
float:right;
margin-left:3px;
}

Uppskattar verkligen all hjälp jag kan få med detta :)