Sideway
output.to from Sideway
Draft for Information Only

Content

CSS Page Layout
 CSS Design Unit
 CSS Container Positioning
  Page with Normal Flow
  Page with Floating Container
  Page with Positioned Container
   Page with Fixed Container
   with Absolute Positioned Container
   Page with Float Relative Positioned Container
   Page with Flow Relative Positioned Container
 CSS Predefined Pattern
  List
  Table
  Flexbox
  Grid
  Multi-column Layout

CSS Page Layout

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

  • position
  • float
  • display
  • column-width

CSS Design Unit

The basic design unit of CSS is a CSS container, a CSS styling block  There are two basic positioning control, discrete and inline flowing, in a CSS container. The inline flowing control is related with the font and font size, while the discrete flowing is not. For example, the paragraphs of a page is arranged in discrete flowing, the letters of a paragraph is arranged in inline flowing. But for page layout, the inline flowing control is usually concerned with block level containers not inline level containers. Therefore, The CSS design unit for CSS page layout can be refered as discrete design unit.

CSS Container Positioning

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

Page with Normal Flow

An example of a HTML page with default display property will cause all CSS containers to follow the Normal flow.
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</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<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:

not support

Page with Floating Container

An example of a HTML page with an additional floating container inserted into 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}
.fr {float:right; width:20%;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Floating Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="fr">This is a floating right 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:

not support

Page with Positioned Container

An additional container can also be inserted into the Normal flow of the page by positioning.

Page with Fixed Container

An example of a HTML page with an additional fixed container inserted into 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}
.pf {position:fixed; width:20%; top:6%; left:40%}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with fix positioned Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="pf">This is a fix 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:

not support

with Absolute Positioned Container

An example of a HTML page with an additional absolute positioned container inserted into 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}
.pa {position:absolute; width:20%; top:6%; left:40%}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Absolute Positioned Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="pa">This is a absolute 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:

not support

Page with Float Relative Positioned Container

An example of a HTML page with an additional float relative positioned container inserted into 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}
.pt {position:relative; width:20%; top:0; right:40%; float:right}
</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="pt">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:

not support

Page with Flow Relative Positioned Container

An example of a HTML page with an additional flow relative positioned container inserted into 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; left:40%;}
</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 class="pw">This is a flow 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:

not support

CSS Predefined Pattern

The layout of CSS containers is arranged according to a predefined form or pattern.

List

An example of a HTML page with a default list.
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 Ordered List</h1>
<p>The following is a list.</p>
<ol>
<li>First Item</li>
<li>Second Itme</li>
</ol>

    </body>
</html>
HTML Web Page Embedded Output:

not support

Table

An example of a HTML page with a default table.
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 Table</h1>
<p>The following is a table.</p>
<table>
<tr><td>First Row First Column/td><td>First Row Second Column</td></tr>
<tr><td>Second Row First Column/td><td>Second Row Second Column</td></tr>
</table>

    </body>
</html>
HTML Web Page Embedded Output:

not support

Flexbox

An example of a HTML page with a default flexbox.
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 Flexbox</h1>
<p>The following is a flexbox.</p>
<div style="display:flex">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<p>The following is a default 'div' box.</p>
<div>
<div>first</div>
<div>second</div>
<div>third</div>
</div>

    </body>
</html>
HTML Web Page Embedded Output:

not support

Grid

An example of a HTML page with a simple Grid.
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}
.gridwrapper {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; grid-gap:5px}
.gridbox1 {grid-column: 1/3; grid-row:1}
.gridbox2 {grid-column: 1; grid-row:2}
.gridbox3 {grid-column: 3; grid-row:1/3}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Grid</h1>
<p>The following is a grid layout.</p>
<div class="gridwrapper">
<div class="gridbox1">first</div>
<div class="gridbox2">second</div>
<div class="gridbox3">third</div>
</div>

    </body>
</html>
HTML Web Page Embedded Output:

not support

Multi-column Layout

An example of a HTML page with a default multi-column container.
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}
.multcol {column-width:200px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Multi-column</h1>
<p>The following is a multi-column paragraph.</p>
<p class="multcol">This a multi-column paragraph. The whole paragraph will be divided into two column if all letter cannot be placed within one column.</p>
<p>The following is also a multi-column paragraph.</p>
<p class="multcol">This a multi-column paragraph.</p>

    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway

ID: 190400021 Last Updated: 4/21/2019 Revision: 0 Ref:

close

References

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

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019