CSS Inline Layout CSS Inline Unit CSS Inline Positioning CSS Inline Flowing Page with Float Relative Positioned Container Page with Flow Relative Positioned Container CSS Inline Property Predifined Tags Page with Positioning Tag Container CSS Properties Normal Flowing Container with Positioning Property Normal Flowing Container with Horizontal Aligning Property Normal Flowing Container with Vertical Aligning Property
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.
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>
Nu Html Checker 
53 
na 
na