Cascading Style Sheet Quick Guide

 
 
This guide contains information how to create Cascading Style Sheets (CSS).

More information about CSS can be found at: http://www.w3.org/Style/CSS/







Div examples: containers



Information
All examples are working for IE 6.0 and Firefox 1.5.

Procedure

Example Screenshot
Example 1 Demonstrate float left (1)(2) and float right (3)(4).

Div example 1.
Example 2 Demonstrate how to put two containers (1)(2) inside another container.

Div example 2.
Example 3 Demonstrate how to position a container (1).

Div example 3.
Example 4 Demonstrate how to position two containers side by side.

Div example 4.
Example 5 Demonstrate how to position two containers side by side with a top container above over the full length.

Div example 5.
Example 6 Demonstrate how to position two containers side by side and left aligned.

Div example 6.
Example 7 Demonstrate how to position one container left aligned (1) and the other right aligned (2).

Div example 7.
Example 8 Demonstrate how to position two containers one below the other. Both containers are left aligned.

Div example 8.
Example 9 Demonstrate how to position two containers. The first container (1) is left aligned the other is below the first and right aligned (2).

Div example 9.
Example 10 Demonstrate how to position two containers one below the other and both are centered.

Div example 10.
Example 11 Demonstrate how to position two containers side by side and left aligned (1)(3). The other container (2) is right aligned.

Div example 11.
Example 12 Demonstrate how to position one container left aligned with text on the right side and below this container.

Div example 12.
Example 13 Demonstrate how to position one container right aligned with text on the left side and below this container.

Div example 13.
Example 14 Demonstrate how to position three containers (1)(2)(3) one below the other and all three containers are inside a fourth container.

Div example 14.
Example 15 Demonstrate how to position a container (1) left aligned with text above this container. Both are also inside a second container.

Div example 15.
Example 16 Demonstrate how to position a container (1) right aligned with text above this container. Both are also inside a second container.

Div example 16.
Example 17 Demonstrate how to position a container (1) left aligned with text on the right and below this container. Both are also inside a second container.

Div example 17.
Example 18 Demonstrate how to position a container (1) left aligned and text below this container.

Div example 18.
Example 19 Demonstrate how to position container (1) left aligned and two containers left (3) and right (2) aligned. Container (3) is overlapping container (1).

Div example 19.
Example 20 Demonstrate how to position a container (1) right aligned and text below this container.

Div example 20.
Example 21 Demonstrate how to position a container (1) left aligned with text below this container. Both are also inside a second container.

Div example 21.
Example 22 Demonstrate how to position two containers side by side and right aligned.

Div example 22.
Example 23 Demonstrate how to position two containers side by side and both are inside a third container.

Div example 23.
Example 24 Demonstrate how to position two containers one below the other. Both containers are right aligned.

Div example 24.
Example 25 Demonstrate how to position a container (1) left aligned and direct below another container (2) right aligned. The same action is repeated again.

Div example 25.
Example 26 Demonstrate how to create a table with div tags.

Div example 26.
Example 27 Demonstrate how to position a container (1) left aligned and another right aligned (2). The same action is repeated several times.

Div example 27.
Example 28 Demonstrate how to position a container (1) left aligned, a container (2) aligned in the middle and another right aligned (3). The same action is repeated several times.

Div example 28.
Example 29 Demonstrate how to position text on the left side inside a container.

Div example 29.
Example 30 Demonstrate how to position text in the center inside a container.

Div example 30.
Example 31 Demonstrate how to position four containers (1)(2)(3)(4) in the corners of a rectangle.

Div example 31.
Example 32 Demonstrate how to create a table with div tags. The table has a header and a footer.

Div example 32.
Example 33 Demonstrate how to position container (1) left aligned and two containers left (3) and right (2) aligned. Container (3) and (2) are below container (1).

Div example 33.
Example 34 Demonstrate how to position container (1) left aligned and two containers left (3) and right (2) aligned. Container (3) and (2) are below container (1).

Div example 34.
Example 35 Demonstrate how to position a container (1) right aligned with text on the left and below this container. Both are also inside a second container.

Div example 35.
Example 36 Center a container in the middle and top of the screen.

Div example 36.
Example 37 Automatically size the height of the iframe (method 1).

This method only works if the parent page (containing the <iframe> tag) and the target iframe page(s) belongs to the same domain.

This method also works if the target iframe page contains a form with a submit button and where the result page must be displayed in the same iframe window, for example a poll.

The height of the first target iframe page will be used for all the following pages.

Div example 37.
Example 38 Explain padding and margin for Firefox and Internet Explorer.

Div example 38, Firefox.

Div example 38b, Internet Explorer.
Example 39 Automatically size the height of the iframe (method 2).

This method only works if the parent page (containing the <iframe> tag) and the target iframe page(s) belongs to the same domain.

This method does not work if the iframe page is a form with a submit button and where the result must be displayed in the same iframe (for example a poll).

Div example 39.
Example 40 Place small label on container top.

Div example 40.
Example 41 Place inline container between text.

Div example 41.
Example 42 Create small colored boxes in a row.

Div example 42.
Example 43 Create small colored boxes in a square.

Div example 43.
Example 44 Create splash screen in front of a page.

Div example 44.