HTML Tips - How to crerate Code Block using DIV tag?

In many scenarios you will need some special block in your HTML page to display set of source code. The source code itself could also be HTML.

Here is an example of code block that utilizing the DIV and PRE HTML tags.

DIV tag is used to create a code block with scroll functions.
PRE tag is used to keep the structure/layout of source code with indents.

!!! Important !!!
If your code inside the block are HTML code, you must replace character "<" with string "&lt;", and replace character ">" with string "&gt;". Otherwise the HTML will be messed up!

Below is the result of sample:

class Scene extends ObjectModel
{
/** @var string Name */
public   $name;

/** @var boolean Active Scene */
public   $active = true;

/** @var array Products */
public   $products;

protected  $table = 'scene';
protected  $identifier = 'id_scene';

protected  $fieldsRequired = array('active');
protected  $fieldsValidate = array('active' => 'isBool');

Below are the Opening tags of DIV, PRE and their style

<div style="width: 500px; height: 280px; border: 1px solid rgb(0, 0, 200); background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(255, 255, 255); padding: 4px; white-space: nowrap; overflow: auto;">
<pre style="margin-top: -20px;">

Below are the closing tags of PRE and DIV

</pre>
</div>