CSS Box in Box Examples

Box in Box Examples

1. Box in Box Example 1: Code Sample Box last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#E0FFFF; margin:5px 0; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <b style="z-index:11; width:100%; position:relative;white-space:normal;">Code Sample:</b>
   <pre style="width:100%; overflow:auto; outline: silver solid 1px; margin:0; padding:0px; background-color:white; font-size:80%">
   <code>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   </code></pre>
   </div>

   HTML Web Page In-line Output:

   Code Sample:

   This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   This is a paragraph. This is a paragraph. This is a paragraph.
   

2. Box in Box Example 2: HTML Web Page Box last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#EE82EE; margin:5px 0; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <b style="z-index:11; width:100%; position:relative;white-space:normal;">HTML Web Page:</b>
   <div style="width:100%; overflow:auto; outline: silver solid 1px; margin:0; padding:0px; background-color:white; font-size:100%">
   <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   </div>
   </div>

   HTML Web Page In-line Output:

   HTML Web Page:

   This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

3. Box in Box Example 3: Centered HTML Web Page Box with Wrapped Text last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#EE82EE; margin:5px auto; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <b style="z-index:11; width:100%; position:relative;white-space:normal;">HTML Web Page:</b>
   <div style="width:100%; overflow:auto; outline: silver solid 1px; margin:0; padding:0px; background-color:white; font-size:100%">
   <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
   </div>
   </div>

   HTML Web Page In-line Output:

   HTML Web Page:

   This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

4. Box in Box Example 4: Centered HTML Web Page Box with Scroll Text last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#EE82EE; margin:5px auto; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <b style="z-index:11; width:100%; position:relative;white-space:normal;">HTML Web Page:</b>
   <div style="width:100%; overflow:auto; outline: silver solid 1px; margin:0; padding:0px; background-color:white; font-size:100%">
   <p style="white-space:nowrap">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p style="white-space:nowrap">This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p style="white-space:nowrap">This is a paragraph. This is a paragraph. This is a paragraph.</p>
   <p style="white-space:nowrap">This is a paragraph. This is a paragraph. This is a paragraph.</p>
   </div>
   </div>

   HTML Web Page In-line Output:

   HTML Web Page:

   This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.

   This is a paragraph. This is a paragraph. This is a paragraph.