Irriterande css-column-problem

Hallå
Håller på att flytta kod fram och tillbaka för att få till css
som innehåller en basic wrap med div:ar inuti.

Det gååår inte!
Det som ser bra ut i IE ser hemskt ut i Firefox - ni vet.
Jag tror det är floaten som jag inte får till.
När sidebar till höger är längre än content till vänster, så hänger den liksom ner över bakgrunden...

Nån med friska ögon som ser vad jag måste göra?

Gifbild finns här: http://www.flamt.com/pics/css-visa.gif

Koden kommer nedan. Tusen tackar till den som orkar ta en titt :-)

----------

#wrap 
{width:800px;
margin: 2em auto;
position:relative; 
height:100%;
}

#content-wrap 
{position:relative; 
clear:both; 
width:800px; 
margin: 0 auto auto auto; 
background: transparent url(images/creme-bg.gif); 
border:10px solid white; 
}

#sidebar {
position:absolute;
top:0px;
right:0px;
width:250px;
padding-top: 10px;
padding-bottom: 40px;  
}

#content {
margin: 0 50px; 
width:520px; 
padding:20px;  
border-right:2px solid white;
}