Brak odstępu między tekstem i kropkowaną linią w css.

Question

#topbar
{
	background-color: #128870;
	color: white;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 25px;
	height: 120px;
}
	
#topbarL
{
	float: left;
	padding: 20px;
	width: 228px;
	text-align: center;
	border-right: 2px dotted #cccccc;
}
#topbarR
{
	float: left;
	padding: 20px;
	width: 670px;
	font-size: 16px;
	text-align: justify;
}

<div id="topbar">
			<div id="topbarL">
			<img src="tolkien4.png"/>
			</div>
			<div ig="topbarR">
				"Czasem niebezpiecznie jest wyjść z domu, gdy staniesz na drodze, nigdy nie wiadomo, dokąd cię nogi poniosą"-J.R.R. Tolkien. <br />
				Zapraszam do zapoznania się z witryną w całości poświęconą tematyce książek.
			</div>
			
			<div style="clear:both;"></div>
		</div>

W sekcji topbar mam zamiar umieścić grafikę oraz tekst. Oba te elementy zamierzam rozgraniczyć kropkowaną linią tak, jak zrobił M. Zelent w 2 odcinku kuru css. Grafika po lewej, a tekst po prawej stronie. Niestety z jakiegoś powodu tekst "przykleja się" do linii; nie zachowuje odstępu 20px (mam wrażenie, że nie działa padding). Proszę o wskazówkę/pomoc.

Answer 1

popraw ig -> id

Answer 2

Dziękuję za pomoc.