#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.