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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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: