Sideway
output.to from Sideway



Draft for Information Only

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.


┬ęsideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 160800003 Last Updated: 2016/8/2 Revision: Ref:

IMAGE

Home (1)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (334)

Reference (60)

Computer

Hardware (148)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (538)new

CSS (1)

HTML

Knowledge Base

Common Color (1)

Html Entity (Unicode) (1)

Html 401 Special (1)

OS (366)

MS Windows

Windows10 (1)

DeskTop (5)

Knowledge

Mathematics

Formulas (8)

Number Theory (165)new

Algebra (14)

Trigonometry (18)

Geometry (18)

Calculus (67)

Engineering

Tables (8)

Mechanical

Control

Process Control (1)

Mechanics (1)

Rigid Bodies

Statics & Dynamics (129)new

Fluid (5)

Fluid Kinematics (5)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)


facebook
Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimersfacebook last modified on 08 Mar 2018