How to show <div> tag literally in <code>/<pre> tag?

I'm using <code> tag inside of a <pre> tag to show code on my blogger blog. Unfortunately it doesn't work with HTML tags. Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML? This is what I do right now:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Which works ok for everything except HTML. Any idea how to achieve this? Thanks.