div mit bg-image wird nicht richtig gefloatet

[klaas]

Hallo,
so soll meine Seite mal aussehen:

xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
x Logo x x lorem ipsum         x
xxxxxxxx x                     x
         x                     x
         x       Inhalt        x
         x                     x
         x                     x
         x                     x
         x                     x
         xxxxxxxxxxxxxxxxxxxxxxx

Die Inhalt-Box hat einen schönen Rahmen mit Schlagschatten. Mein HTML sieht daher so aus:

<div id="logo"><img src="/images/logo.png" alt="Logo" /></div>  
  
<div id="content">  
  
    <div id="top"></div>  
  
    <div id="canvas">  
        lorem ipsum  
    </div>  
  
    <div id="bottom"></div>  
  
 </div> 

Und das derzeitige CSS:

#logo{  
	float:left;  
}  
  
#content{  
}  
  
#canvas{  
	min-height:600px;  
	background:url(/images/canvas-line.png) repeat-y;  
	padding:0 40px;  
	margin:0;  
}  
  
#canvas-top{  
	margin:0;  
	padding:0;  
	background:url(/images/canvas-top.png) no-repeat;  
	height:28px;  
}  
  
#canvas-bottom{  
	margin:0;  
	padding:0;  
	background:url(/images/canvas-bottom.png) no-repeat;  
	height:28px;  
}

Problem:
Der (Text-)Inhalt von "content" wird zwar um das logo gefloatet, aber nicht der Rahmen. Weder die horizontalen noch die vertikalen Linien. Die Box "klebt" also in der linken oberen Ecke und wird vom Logo überdeckt. Der Text fließt rum.

Ergebnis:

xxxxxxxx xxxxxxxxxxxxxx
x Logo x  lorem ipsum x
xxxxxxxx              x
x                     x
x       Inhalt        x
x                     x
x                     x
x                     x
x                     x
xxxxxxxxxxxxxxxxxxxxxxx

Ich vermute mal, es liegt am bg-image oder? Nur wie krieg ich das jetzt passend hin?

1000dank
klaas