Use of <code> tag for multiple lines

[webgo2]

I am attempting to place visable html code in stylized code tags. It seems to work fine for one line code, but when I have multiple lines each new line overlaps the line before it. Kind of hard to explain but maybe there is a better way of doing this or there's an error in the way I am attempting to do this?

<!-- STYLE -->
.coded {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
}
code {
border: 1px solid #000033;
background-color: #EEE;
padding: 10px;
font: 300 12px tahoma;
}

<!-- HTML -->
<p class="coded">
<code>
&lt;a href="http://example.com/"&gt;&lt;img src="http://example.com/images/example1.jpg" alt="Example Image"&gt;&lt;&#47;a&gt;
</code>
</p>

I tried using the <pre> tag, but it didn't display the way I wanted it to. Any inputs would be appreciated.

Thanks.

[encyclo]

<code>

is an inline not a block element, hence the overlapping once you get new lines. A quick fix is to add

display:block;

like this:

code {
border: 1px solid #000033;
background-color: #EEE;
padding: 10px;
font: 300 12px tahoma;
[b]display:block;[/b]
} 

[webgo2]

Thank you very much - works great.