Witam serdecznie wszystkich,

Mam taki mały problem, otóż stworzyłem sobie obramowanie do tekstu i chciałbym je odpowiednio zaimplementować.
Góra i dół to wiadomo, schody zaczynają się z bokami

mój kod css oraz html (c to czyszczenie floata):

[HTML] pobierz, plaintext 
#opis{
	margin-top: 10px;
}
#opis .top{
	background-image: url('./img/opis_top.png');
	width: 868px;
	height: 15px;
	display: block;	
}
#opis .left{
	float: left;
	background-image: url('./img/galery_border_pion.png');
	background-repeat: repeat-y;
	height: 100%;
	width: 4px;
}
 
#opis .right{
	float: right;
	background-image: url('./img/galery_border_pion.png');
	background-repeat: repeat-y;
	height: 100%;
	width: 4px;
}
 
#opis .body{
	float: left;
	width: 880px;
	margin-left: 5px;
}
 
		<div id="opis">
				<div class="top"></div>
				<div class="left"></div>
				<div class="body">
					OPIS<br><br><br><br><br><br><br><br>OPIS
				</div>
				<div class="right"></div>
				<div class="c"></div>
 
		</div>
[HTML] pobierz, plaintext 

I co jest nie tak? Pokaż jakiś działający przykład http://jsfiddle.net/

LEWY I PRAWY DIV SIĘ NIE ROZCIĄGAJĄ.