Witam. Mam problem ze złożeniem strony w CSS. Standardowo mam prawą kolumnę, lewą kolumnę, a pomiędzy nimi mam pionową linię, która oddziela te dwie kolumny.

Kod CSS mam w takiej postaci:

[HTML] pobierz, plaintext 
  1. #srodek_C{
  2.   	width:800px;
  3.   	background-color: #fff;
  4.   	margin:0 auto;
  5.   	padding:0px;
  6.   	overflow:hidden;
  7. }
  8.  
  9. #lewa{
  10.   	width:250px;
  11.   	background-color: #fff;
  12.   	float:left;
  13.   	margin:0px;
  14.   	padding:0px;
  15.   	overflow:hidden;
  16. }
  17.  
  18. #srodek{
  19.   	width: 3px;
  20.   	float: left;
  21.   	background-repeat: repeat;
  22.   	overflow:hidden;
  23. }
  24.  
  25. #srodek_a1{
  26.   	width: 3px;
  27.   	height:10px;
  28.   	background-color: #fff;
  29.   	float: left;
  30.   	background-repeat: repeat;
  31. }
  32.  
  33. #srodek_a2{
  34.   	width: 3px;
  35.   	float: left;
  36.   	height:200px;
  37.   	background-image: url(../img/srodek.gif);
  38.   	background-repeat: repeat;
  39.   	overflow:hidden;
  40. }
  41.  
  42. #prawa{
  43.   	width:546px;
  44.   	background-color: #fff;
  45.   	float:left;
  46.   	margin:0px;
  47.   	padding:0px;
  48.   	border: 0px;
  49.   	overflow:hidden;
  50. }
[HTML] pobierz, plaintext


w pliku html wpisuję:

[HTML] pobierz, plaintext 
  1. <div id="srodek_C">
  2.       <div id="lewa">aa<br /> bb<br /> cc<br /> dd<br /> ee<br /> ff<br /> gg<br /> hh<br /> ii<br /> jj<br /> kk<br /> ll</div>
  3.       <div id="srodek">
  4.       		<div id="srodek_a1"></div>
  5.       		<div id="srodek_a2"></div>
  6.       </div>
  7.       <div id="prawa"></div>
  8.     </div>
[HTML] pobierz, plaintext



Problem jest w tym, że gdy wpisuję jakiś tekst w prawej lub w lewej kolumnie to pionowa linia się nie pojawia. Gdy wpiszę wysokość na "na sztywno" wówczas wszystko jest ok. Jak zrobić aby pionowa linia dopasowywała się względem tekstu?