Position af divs

Problemstilling:
En div med ukendt indhold. Der kan være tabeller, billeder m.m. Går indholdet ud over bredden på min div, ødelægges layoutet.

Nem løsning:
Sætte overflow-x til scroll og overflow-y til hidden på min div.

Problem ved nem løsning:
Der vil altid være horisontal scroll synlig, om det er nødvendigt eller ej.

Løsning på "Problem ved nem løsning":
Vis ikke scroll, hvis det ikke er nødvendigt.

Løsning:
Putte en div ind med parameteren float:right efter min problemdiv. Mål absolut pos. for begge divs og træk fra hinanden. Dermed har jeg bredden af indholdet.

Kode til løsning:

<input onclick="chkindholdsdiv('LangBeskrivelse', 'tester')" name="Test" type="button"> //bruger knap til test

<script>
function chkindholdsdiv(Indhold, Snyder) {
YY=parseInt(document.getElementById(Indhold).style.left);
XX=parseInt(document.getElementById(Snyder).style.left);
ZZ=XX-YY;
   
if (ZZ > 550) {
  document.write('ja'+YY+' ' +XX); // kun til test
  document.getElementById(Indhold).style.overflowX='scroll';
  document.getElementById(Indhold).style.overflowY='hidden';
} else {
  document.write('Nej'+YY+' ' +XX);// kun til test
}
}
</script>

<div id="LangBeskrivelse" style=" left:1px; background-color:#33FF99; width:550px; padding-left: 10px; border-left:solid 2px red"><P>Eksempel på for bredt et billede (test): <IMG src="bredbillede.jpg"></P></div>

<div id="tester" style="height:1px; width:1px; background-color:#FF0000; float:right"></div>

... men jeg fatter ikke JavaScript. Hvad skal der stå ved XX= og YY=, for at få mine divs left-position?

Skaét skærs' mer' ud?