CSS Container

CSS Container is a general term used to describe the styling container of CSS model.

Characteristic of CSS Container

A CSS Container has two typical characteristics, flow and behaviour.

Flow of CSS Container

According to the flow of CSS Container, CSS Containers used in CSS can be divided into discrete flowing container and inline flowing container. An discrete flowing container is a flow independent container of which the placement of container is arranged mainly according to the CSS rendering property of the container with reference to a higher hierarchy CSS container. For example, the discrete normal flow. An inline flowing container is a flow dependent container of which the placement of container is arranged according to the CSS rendering property of the container with reference to the CSS inline typesetting model. For example, the inline normal flow.

Level of CSS Container

There are two concerns in the level of CSS container.

According to the containing ability of the corresponding HTML Container, an inline level HTML container can only contain inline level HTML container, while an block level container can contain both inline and block level HTML containers. Therefore the level of CSS container can be naturally divided into inline, inline-block, or block level container according to the HTML tag element. And this is the structural limitation due to the HTML document.

In fact, the level of CSS container only affects the available predefined presentation properties of the CSS container, that is the behaviour. In general, a CSS inline level container is used to specify a CSS container that is used an inline typesetting purpose container with specific CSS inline level properties, while a CSS block level container is used to specify a CSS container that is used as a more general purpose container with specific CSS block level properties. As both inline flowing and discrete flowing are built-in features for all types of CSS containers, that is, an CSS inline level container can also be used to contain both CSS inline level and CSS block level containers providing that the HTML requirements are fulfilled.

Types of Basic CSS Containers

The types of basic CSS containers can be grouped according to the flow of CSS container.

Inline Flowing Container

The inline concept used in CSS2 has two meanings but shares the same sense, that is a discrete flowing container can never be an inline level container.

In other words, an inline flowing inline level container, called 'inline' container, is an inline flowing container with inline level behaviour. An inline flowing HTML block level container, called 'inline-block' container, is an inline flowing container with block level behaviour.

Discrete Flowing Container

A discrete flowing block level container, called 'block' block, is a discrete flowing container with block level behaviour. However, there is no discrete flowing inline level containers because a block level container is already a general purpose container and a container with specific inline feature will already be considered as an inline flowing container.

Types of Basic CSS Containers

inline levelblock level inline flowinlineinline-block discrete flown/ablock

Display Property

The display property of CSS Container is originally only used to specify some typical predefined forms and patterns that matching with HTML tag. But, the CSS display property can also be used to alter the display property of a HTML tag element. However, the CSS display property is only designed to modify how the CSS container is displayed, and is not used to modify the property of a HTML tag. Therefore, an inline level HTML tag with CSS block display property will be displayed as a CSS block level container, but the inline level HTML tag is still not allowed to contain any block level HTML tag elements.

In CSS level 2 specification, a single keyword value is used to specify the characteristics of a CSS container. But in CSS level 3 specification, these characteristics are refered as outer display type and inner display type explicitly and two keyword values are used to specify the characteristics of a CSS container.

In general, CSS display property is used to specify the form or pattern of how a CSS container is presented.

CSS Form

CSS display form is mainly used to specify how to present the specified container. Some typical CSS forms are inline, inline-block, block, none, list-item, table-cell, table-caption.

CSS Pattern

CSS display pattern is mainly used to specify how to present the child containers of the specified container. Some typical CSS patterns are table, inline-table, table-column-group, table-header-group, table-footer-group, table-column, table-row.

CSS Containers of HTML tags

An example of HTML tags with default display property.

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">
.z {outline:silver solid 2px; width:50px; padding:5px; margin-top:0 ;margin-bottom:0}
</style>
<title>Sample Page</title>
    </head>
    <body>
inline-flow_example
<div style="padding:5px;outline:red 1px solid; word-wrap:break-word">
<div style="display:inline;background:cyan"><b class="z">b</b>
br<br />
<big class="z">big</big>
<cite class="z">cite</cite>
<code class="z">code</code>
<del class="z">del</del>
<em class="z">em</em>
<i class="z">i</i>
<ins class="z">ins</ins>
<kbd class="z">kbd</kbd>
<q class="z">q</q>
<s class="z">s</s>
<samp class="z">samp</samp>
<small class="z">small</small>
<strong class="z">strong</strong>
<sub class="z">sub</sub>
<sup class="z">sup</sup>
<tt class="z">tt</tt>
<u class="z">u</u>
<var class="z">var</var>
<var class="z">var</var>
button<button class="z" style="background:transparent;width:60px">button</button>
<textarea class="z" style="background:transparent;width:70px" rows="1" cols="1">textarea</textarea>
inline form<form class="z" style="display:inline;width:150px" action="/">
input<input class="z" style="background:transparent;width:70px" type="submit" value="submit" />
input<input class="z" style="background:transparent;width:70px" type="submit" value="submit" />
</form>
select inline-block<select class="z" style="background:transparent;width:70px"><option value="8">option</option></select>
</div></div>
discrete-flow example<div style="padding:5px;outline:red 1px solid">
<div style="display:inline;background:cyan">
h1<h1 class="z">h1</h1>
h2<h2 class="z">h2</h2>
h3<h3 class="z">h3</h3>
h4<h4 class="z">h4</h4>
h5<h5 class="z">h5</h5>
h6<h6 class="z">h6</h6>
div<div class="z">div</div>
p<p class="z">p</p>
address<address class="z">address</address>
blockquote<blockquote class="z">blockquote</blockquote>
description list dl<dl class="z">
<dt class="z">dt</dt>
<dd class="z">dd</dd>
</dl>
form block<form class="z" style="width:250px" action="/">
form fieldset:<fieldset class="z" style="width:250px">fieldset
<legend class="z">legend</legend>
input<input class="z" type="submit" value="submit" />
input<input class="z" type="submit" value="submit" />
</fieldset>
</form>
list ol<ol class="z">
<li class="z">li</li>
</ol>
list ul<ul class="z" style="width:150px">
<li class="z">li</li>
<li class="z">li</li>
</ul>
center<center class="z">center</center>
hr<hr class="z" />
pre<pre class="z">pre</pre>
table<table class="z" style="width:250px">
<caption class="z">caption<br /></caption>
<colgroup class="z">
<col class="z" style="background-color:transparent">
<col class="z" style="background-color:yellow">
</colgroup>
<thead class="z">
<tr class="z">
<th class="z">th</th>
<th class="z">th</th>
</tr>
</thead>
<tfoot class="z">
<tr class="z">
<td class="z">td</td>
<td class="z">td</td>
</tr>
</tfoot>
<tbody class="z">
<tr class="z">
<td class="z">td</td>
<td class="z">td</td>
</tr>
<tr class="z">
<td class="z">td</td>
<td class="z">td</td>
</tr>
</tbody>
</table>table end</div></div>

    </body>
</html>

HTML Web Page Embedded Output:

Anonymous Container

Besides these named containers specified by display property, two special types of containers, called anonymous block container and anonymous inline container, are generated by the visual formatting algorithm. Both anonymous block and anonymous inline containers do not have a specific CSS Container name that can be specified by CSS selectors.

Anonymous Inline Container

Anonymous inline container is used to hold inline flowing containers

Anonymous Block Container

Anonymous block container is used to hold discrete flowing containers

Common CSS Containers of HTML Tags

The types of HTML tags can be divided into document construction and document presentation according to function. And for presentation, HTML tags can be further divided into block level and inline level. In general, the CSS display property is originally used to match with the HTML tags. However, most HTML tags can be grouped into three common CSS containers, inline container, inline-block container, and block container. And therefore the flow and level characteristics of CSS containers can also be used to classify HTML tags also.

CSS 'block' Container

A CSS container with 'block' display property is a CSS discret flowing block level type container.

CSS 'inline' Container

A CSS container with 'inline' display property is a CSS inline flowing inline level type container.

CSS 'inline-block' Container

A CSS container with 'inline-block' display property is a CSS inline flowing block level type container.

CSS Containers of HTML Tags

The CSS display property is usually specified according to the name of HTML tag.

HTML tagDefault CSS Display PropertyDefault CSS FlowDefault CSS LevelHTML tag Level headnonen/an/an/a html, address, blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, ol, p, ul, center, hr, pre blockdiscreteblockblock lilist-itemdiscreteblockblock tabletablediscreteblockblock trtable-rowdiscreteblockblock theadtable-header-groupdiscreteblockblock tbodytable-row-groupdiscreteblockblock tfoottable-footer-groupdiscreteblockblock coltable-columnn/an/an/a colgrouptable-column-groupn/an/an/a td, thtable-celldiscreteblockblock captiontable-captiondiscreteblockblock button, textarea, input, selectinline-blockinlineblockblock b, strong, i, cite, em, var, tt, code, kbd, samp, img, span, big, small, sub, sup, s, strike, del, u, ins, q inlineinlineinlineinline brinlineinlineinlineinline

CSS Container Positioning

The ways to place a CSS Container in a parent container are flowing, floating, and positioning. These positioning methods are designed to present CSS containers in a CSS document.

Flowing

The flowing method, also called static flowing, is the basic CSS Container positioning method used in typesetting. The flowing method is triggered by specifying the CSS float property to none, and the CSS position property to static. In default static flow, a discrete flowing container, i.e. block, flows vertically as a new paragraph in the parent container, while an inline flowing container, i.e. inline, inline-block, flows horizontally along a inline box of the parent container.

Floating

The floating method is a general CSS Container positioning method used along with flowing. The floating method is triggered by specifying the CSS float property not to none, and the CSS position property to static. In floating, a floating container is a discrete flowing container that floats according to the specified value of the float property.

Positioning

The positioning method is a flexible CSS Container positioning method with reference to an anchor point. The positioning method is triggered by specifying the CSS position property to fixed, absolute, and relative. With CSS position fixed property, the reference anchor point is with respect to the viewport. With CSS position absolute property, the reference anchor point is with respect to the positioned non-static parent container including margin. With CSS position relative property, the reference anchor point is with respect to the original exactly defined normal static position in form of offset position.

Examples of CSS Positioning

Example

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">
div, p, i, b, h1, .zc {outline:silver solid 2px}
.zc {background:cyan;color:red}
.fx {float:right}
.fy {float:left}
.fn {float:none}
.pa {position:absolute}
.pr {position:relative;}
.ps {position:static;}
.pf {position:fixed;}
.rn50 {right:-50px}
.t10 {top:10px}
.t30 {top:30px}
.t50 {top:50px}
.t120 {top:120px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>CSS Flowing</h1>
<div class="fn ps rn50">
<p><b>CSS Positioning1a</b><b>CSS Positioning1b</b></p>
<p><b class="fn ps rn50">CSS <i>Positioning2a</i></b><b class="fn ps rn50">CSS <i>Positioning2b</i></b></p>
<p><b>CSS <i>Positioning3a</i></b><b>CSS <i>Positioning3b</i></b></p>
</div>
<h1>CSS Floating</h1>
<div class="fy ps rn50">CSS Floating Right
<p><b>CSS Positioning4a</b><b>CSS Positioning4b</b></p>
<p class="zc"><b class="fx ps rn50">CSS <i>Floating5a</i></b><b class="fx ps rn50">CSS <i>Floating5b</i></b></p>
<p><b>CSS <i>Floating6a</i></b><b>CSS <i>Floating6b</i></b></p>
</div>
<div class="fx ps rn50">CSS Floating Left
<p><b>CSS Positioning7a</b><b>CSS Positioning7b</b></p>
<p><b class="fy ps rn50">CSS <i>Floating8a</i></b><b class="fy ps rn50">CSS <i>Floating8b</i></b></p>
<p class="zc"><b>CSS <i>Floating9a</i></b><b>CSS <i>Floating9b</i></b></p>
</div>
<h1>CSS Fixed</h1>
<div class="fy ps rn50">CSS Fixed
<p><b>CSS Positioning10a</b><b>CSS Positioning10b</b></p>
<p><b class="zc fy pf t10">CSS <i>Fixed11a</i></b><b class="fx ps rn50">CSS <i>Fixed11b</i></b></p>
<p><b>CSS <i>Fixed12a</i></b><b>CSS <i>Fixed12b</i></b></p>
</div>
<div class="fx ps rn50">CSS Fixed
<p><b>CSS Positioning13a</b><b>CSS Positioning13b</b></p>
<p><b class="">CSS <i>Fixed14a</i></b><b class="y">CSS <i>Fixed14b</i></b></p>
<p><b>CSS <i>Fixed15a</i></b><b>CSS <i class="zc fy pf t10">Fixed15b</i></b></p>
</div>
<h1>CSS Absolute</h1>
<div class="fy ps rn50">CSS absolute
<p><b>CSS Positioning16a</b><b>CSS Positioning16b</b></p>
<p class="zt">a<b>CSS <i class="zc fy pa t50">Absolute17a</i></b>b<b class="zc fy pa t30">CSS <i>Absolute17b</i></b>c</p>
<p style="position:relative">aaa<b class="fy pa t30" style= "margin:10px">CSS <i>Absolute18a</i></b><b class="fy pa t30">CSS <i>Absolute18b</i></b></p>
</div>
<div class="fx ps rn50" style="position:relative">CSS absolute
<p><b>CSS Positioning19a</b><b>CSS Positioning19b</b></p>
<p class="zc pa t120"><b>CSS Positioning20a</b><b>CSS Positioning20b</b></p>
<p><b>CSS <i>Absolute21a</i></b><b class="y">CSS <i>Absolute21b</i></b></p>
<p><b>CSS <i>Absolute22a</i></b><b>CSS <i class="zc fy pa t30">Absolute22b</i></b></p>
</div>
<h1>CSS Relative Flowing</h1>
<div class="fn ps rn50">
<p><b>CSS Positioning23a</b><b>CSS Positioning23b</b></p>
<p><b class="fn ps rn50">CSS <i>Positioning24a</i></b><b class="zc fn pr rn50">CSS <i>Positioning24b</i></b></p>
<p class="zc fn pr rn50"><b>CSS <i>Positioning25a</i></b><b>CSS <i>Positioning25b</i></b></p>
</div>
<h1>CSS Relative Floating</h1>
<div class="fy pr rn50">CSS Floating Right
<p><b>CSS Positioning26a</b><b>CSS Positioning26b</b></p>
<p class="zc"><b class="fx ps rn50">CSS <i>Floating27a</i></b><b class="fx pr rn50">CSS <i>Floating27b</i></b></p>
<p><b>CSS <i>Floating28a</i></b><b>CSS <i>Floating28b</i></b></p>
</div>
<div class="fx ps rn50">CSS Floating Left
<p><b>CSS Positioning29a</b><b>CSS Positioning29b</b></p>
<p><b class="fy pr rn50">CSS <i>Floating30a</i></b><b class="fy ps rn50">CSS <i>Floating30b</i></b></p>
<p class="zc"><b>CSS <i>Floating31a</i></b><b>CSS <i>Floating31b</i></b></p>
</div>

    </body>
</html>

HTML Web Page Embedded Output:

The Basic Types of CSS Container Presentation

Apart from the predefined CSS forms or patterns, the CSS display, float and position properties are used to arrange the presentation of CSS container in the CSS document.

The Display, Float, and Position Properties of CSS Container Positioning

CSS DisplayCSS Float PropertyCSS Position PropertyCSS Top, Bottom, Left, Right PropertiesPositioning 'inline' or "inline-block''none'staticanyInline Flowing 'inline' or "inline-block''none'relative0Inline Flowing 'block''none'staticanyNormal Discrete Flowing 'block''none'relative0Normal Discrete Flowing anynot 'none'staticanyFloating anynot 'none'relative0Floating anyanyfixed, absolute, relativeposition/offset valuesPositioning anyanyfixedposition valuesFixed positioning with respect to viewPort. anyanyabsoluteposition valuesAbsolute positioning with respect to a upper non-static parent container. any'none'relativenon zero offser valuesRelative positioning with respect to its original static flowing position additionally. anynot 'none'relativenon zero offset valuesRelative positioning with respect to its original static floting position additionally.