Krångel med css och float

Jag håller på med en design som är uppbyggd med en centrerad container, i den finns:

header
nav
div id="texten"
div id="sidoruta"
footer

"div texten" är tänkt att ligga i mitten medan "div sidoruta" flyter till höger.
Först var det inga problem, jätteenkel kod osv. CSS för textfältet var i stort sett bara

margin: auto;
width: 700px;

och CSS för sidorutan

width: 120px;
float: right;
clear: right;

Sen ville jag ha en bild i textfältet och då blev det svårt. För att bilden skulle kunna flyta åt vänster och fortfarande vara omsluten av div-en satte jag en overflow: hidden. Nu är textfältet inte längre centrerat i containern, istället tar den hänsyn till sidorutan och lägger sig mitt emellan den och containerns vänstra kant. Men jag vill att textfältet ska vara i mitten och sidorutan avsides, inte att båda tillsammans ska vara centrerade.

Det här borde väl gå att lösa enkelt?
Med en osynlig ruta på andra sidan också blir det rätt igen, men det är inte en bra lösning.
Marginalerna kan man förstås justera, men på vissa undersidor kommer jag ha en (synlig) ruta på andra sidan och då blir det fel.
Absolut positionering funkar väl men jag undviker gärna det, dessutom vet jag inte riktigt hur det funkar om man anger padding i em istället för pixlar (jag har containern och textfältet i pixlar men textstorlek och padding i em).
Tänka om vad gäller designen är förstås lättast men lite fegt

Hoppas jag missat nåt självklart!

edit: svårt med häger och vönster