CSS Inline Layout

In general, a number of CSS properties are designed to modify and control the inline detailed layout of a CSS page. Some typical properties used in

CSS inline layout are

margin property
padding property
vertical-align property
text-align property

CSS Inline Unit

Unlike discrete design unit, the CSS inline unit is a CSS container with reference to a font and font size. There are two types of positioning control, relative positioning and inline positioning. The relative positioning is for block level container manipulation, while the inline positioning is for inline level manipulation. For example, the inline-block container inside a container can be manipulated by relative positioning, and the inline container can be manipuilated by inline positioning.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.fe30 {font-size:30px}
.fe20 {font-size:20px}
.fe16 {font-size:16px}
* {outline:silver solid 2px}
.fl {float:left;background:cyan}
.ib {display:inline-block;background:yellow}
.br {border:solid red 5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>Discrete and Inline Flowing</h1>
<div class="fe30"><div class="fl fe20">discrete flow</div>
Inline text flow
<div class="ib fe20">Inline flow</div>
<div class="ib fe30">Inline flow</div>
<div class="ib fe20 br"></div>
<div class="ib br"></div>
<div class="ib fe16 br">.</div>
</div>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Inline Positioning

The inline layout of CSS containers is arranged by modify and control the inline flowing and position of containers.

CSS Inline Flowing

CSS inline flowing is mainly concerned with the detailed inline layout by making use of the relataive positioning techniques.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.pt1 {position:relative; width:20%; top:-1em; left:5%; float:left}
.pt2 {position:relative; width:20%; top:0; left:-10%; float:left}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Float Relative Positioned Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="pt1">This is a float relative positioned container.</p>
<p class="pt2">This is a float relative positioned container.</p>
<p>Tags, h1, p, h2, and p, are arranged in discrete flowing. The letters insides tags, h1, p, h2, and p, are arranged in inline flowing</p>

    </body>
</html>

HTML Web Page Embedded Output:

Page with Float Relative Positioned Container

An example of a HTML page with adjusted float relative positioned containers in the Normal flow of the page.

Page with Flow Relative Positioned Container

An example of a HTML page with an adjusted flow relative positioned container in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.pw {position:relative; width:20%; top:-0.5em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Flow Relative Positioned Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>

<p>Tags, h1, p, h2, and p, are arranged in discrete flowing <b class="pw">This is a flow relative positioned container. </b> The letters insides tags, h1, p, h2, and p, are arranged in inline flowing</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Inline Property

CSS inline property is mainly concerned with the detailed inline layout by making use of the CSS inline positioning properties.

Predifined Tags

Some predefined tags are associated with some predefined inline positioning properties. For example

<sup> tag
<sub> tag

Page with Positioning Tag Container

An example of a HTML page with positioning tag containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Normal Flow Page with position tag containers</h1>
<div>
<p>The following is a superscript <sup>superscript</sup> and the following is a subscript <sub>subscript</sub></p>
</div>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Properties

Some CSS properties are used to specify the inline positioning and aligning properties. For example

margin property
padding property
vertical-align property
text-align property

Normal Flowing Container with Positioning Property

An example of a HTML page with positioning tag containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.p1 {margin:5px;padding:5px}
.p2 {margin:10px;padding:10px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page of Normal Flowing Container with Positioning Property</h1>
<div>
<p class="p1">A simple paragraph with margin and padding of 5px</p>
<p class="p2">A simple paragraph with margin and padding of 10px</p>
</div>

    </body>
</html>

HTML Web Page Embedded Output:

Normal Flowing Container with Horizontal Aligning Property

An example of a HTML page with horizontal aligning containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page of Normal Flowing Container with Horizontal Aligning Property</h1>
<div>
<p style="text-align:left">A simple paragraph of left text-align.</p>
<p style="text-align:center">A simple paragraph of center text-align.</p>
<p style="text-align:right">A simple paragraph of right text-align.</p>
<p style="text-align:justify;width:30%">A simple paragraph of justifiy text-align.</p>
</div>

    </body>
</html>

HTML Web Page Embedded Output:

Normal Flowing Container with Vertical Aligning Property

An example of a HTML page with vertical aligning containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
span {font-size:8px}
p {font-size:35px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page of Normal Flowing Container with Vertical Aligning Property</h1>
<div>
<p>A simple paragraph with text of <span style="vertical-align:top">top vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:text-top">text-top vertical-align</span>.</p>
<p>A simple paragraph with text <sup>of</sup> <span style="vertical-align:super">super vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:middle">middle vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:baseline">baseline vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:text-bottom">text-bottom vertical-align</span>.</p>
<p>A simple paragraph with text <sub>of</sub> <span style="vertical-align:sub">sub vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:bottom">bottom vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:100%">100% vertical-align</span>.</p>
<p>A simple paragraph with text of <span style="vertical-align:1em">1em% vertical-align</span>.</p>
</div>

    </body>
</html>

HTML Web Page Embedded Output: