Cascading Style Sheets Level 2 (CSS-2) offers a wide variety of layout control possibilities that weren't there in HTML.

Laying out pages using CSS offers a number of advantages over doing the same layout with tables:

• simpler
• more flexible
• more compact
• offers more features.

As always, there are disadvantages:

• The main problem is that for the most part, browsers don't support it as well as we'd like, and not as universally as they support tables.
• A secondary problem is that centering isn't directly provided for in CSS-2, so either cumbersome work-arounds must be used, or we're back to using tables - at least for some purposes.

In this module we'll take a swift look at the 2-dimensional aspects of positioning. We'll go over 3-D positioning floating in module X23c "Layers in CSS". There's lots of detail missing from this though - it's only intended as an introduction!

Here's a "freebee": Static positioning is what you get if you don't do anything else.

In other words, Static positioning follows the normal flow of elements from top to bottom, as written in the code.

With fixed positioning, you can determine an element's position relative to the window it appears in. In other words, if a page has more text than what fits in one window, you can cause some of the elements to scroll and other elements to remain in place.

This is rather like frames, except that the elements you fix in place can be anywhere in the window, including smack in the middle! That's not usually a helpful thing to do, but there are many useful ways you can use this.

img {position: fixed; top: 10px; left: 5px;}

What is the earliest version of each major browser that supported fixed positioning?

Absolute positioning refers to where an element appears with respect to its parent element. This differs from fixed positioning, which refers to the window.

To make things interesting, CSS allows us to specify absolute positioning in either absolute measures or relative values.

• Absolute measures: px, cm, mm, in, pc, pt
• Relative measures: em, ex, %

Absolute positioning only works as advertized if the parent element has specific height and/or width set. If the parent's size depends on its content, absolute positioning is ignored.

img {position: absolute; top: 10px; left: 5px;}

What browser versions support absolute positioning?

When we specify relative positioning, what is it relative to? It's relative to the position the element would have occupied if we left it alone - that is, relative to its static position.

Relative positioning causes an element to move a specified distance from its own normal position. This might results in overlapping other elements.

Again, CSS makes life interesting: we can use either absolute measures or relative values to specify an element's relative position.

img {position: relative; top: 10px; left: 5px;}

What browser versions support relative positioning?

When we specify positions, it is with measures from one of the sides:

• Top: positive offsets are down
• Bottom: positive offsets are up
• Left: positive offsets are right
• Right: positive offsets are left

Generally, two offsets are needed to make sure elements end up in the right place. Usually, it's the top and the left.

Contents of an element are set using the color property, and the background color is set using background-color. Both accept color designations in any valid way.

The initial value of background-color is transparent, allowing any underlying color to show through.

p {color: blue; background-color: yellow;}

This is a normal paragraph with inline style giving it a yellow background.

Any HTML element can be assigned a background image using CSS. This paragraph uses the divider strip rainpale.jpg as its background.

body {background-image: url(blumrbll.jpg);}

This results in the image being tiled just as it would be in the body statement of an HTML file.

In addition, we can control the tiling of a background image with the background-repeat property. It takes any of four values:

• repeat (the default)
• repeat-x (creates one horizontal row of images)
• repeat-y (creates one vertical column of images)
• no-repeat (only one image is placed in the background)

body {background-image: url(blumrbll.jpg); background-repeat: repeat-x;}

Why "boxing it up?" Because everything in an HTML file is considered by CSS to be in a box. This includes both block elements and inline elements.

Boxes can be either visible or invisible - though usually, they're invisible. But visible or not they all consist of certain elements:

• content area (innermost)
• padding
• border
• margin (outermost)

Each of these parts can be controlled via CSS to some degree or another.

Borders have three main properties in CSS:

• border-style, which accepts any of the following values:
  • none (the default)
    <li style="margin: 3px; padding: 3px;">
  • solid (the only kind required for CSS-1 compliant UAs)
    <li style="border-style: solid; margin: 3px; padding: 3px;">
  • dotted
    <li style="border-style: dotted; margin: 3px; padding: 3px;">
  • dashed
    <li style="border-style: dashed; margin: 3px; padding: 3px;">
  • double
    <li style="border-style: double; margin: 3px; padding: 3px;">
  • groove
    <li style="border-style: groove; margin: 3px; padding: 3px;">
  • ridge
    <li style="border-style: ridge; margin: 3px; padding: 3px;">
  • inset
    <li style="border-style: inset; margin: 3px; padding: 3px;">
  • outset
    <li style="border-style: outset; margin: 3px; padding: 3px;">
• border-width
  • thin
    <li style="border-style: solid; border-width: thin; margin: 3px; padding: 3px;">
  • medium
    <li style="border-style: solid; border-width: medium; margin: 3px; padding: 3px;">
  • thick
    <li style="border-style: solid; border-width: thick; margin: 3px; padding: 3px;">
  • any unit of length
    <li style="border-style: dotted; border-width: 10px; margin: 3px; padding: 3px;">
• border-color
  • any color
    <li style="border-style: solid; border-width: thick; margin: 3px; padding: 3px; border-color: #cc00ff">
  • if not specified, a border will be the same color as the color of the element if surrounds - usually, the text-color.

In addition, there are several ways to say what border you want:

• name the border property specifically:
  • border-top
    <li style="margin: 3px; padding: 3px; border-top: thin solid yellow;">
  • border-bottom
    <li style="margin: 3px; padding: 3px; border-bottom: thin dotted blue;">
  • border-left:
    <li style="margin: 3px; padding: 3px; border-left: medium solid orange;">
  • border-right:
    <li style="margin: 3px; padding: 3px; border-right: thick ridge red;">
• name the values in order:
  • one value applies to all borders
    <li style="border: medium solid; margin: 3px; padding: 3px; border-color: red;">
  • two values: first is top and bottom, second is left and right
    <li style="border: medium solid; margin: 3px; padding: 3px; border-color: red yellow;">
  • three values: first is top, second is bottom, third is left and right
    li<li style="border: medium solid; margin: 3px; padding: 3px; border-color: red yellow green;">
  • four values: clockwise from the top (top, right, bottom, left)
    <li style="border: medium solid; margin: 3px; padding: 3px; border-color: red yellow green blue;">

Elements are made up of boxes, as pointed out above. Margins are the outermost part of an element's box. Inside the margin is the border, followed by the padding. The content is inside everything.

Margins are always transparent, but padding shares the background color of the element. The thickness can be set with either absolute or relative units:

• Absolute units are px, cm, mm, in, pc, pt
• Relative measures are em, ex, %.
  • em and ex are relative to the font size of the element;
  • % is relative to the width of the element.

h3 {margin: 5px; padding: 2%;}

Generally, the height and width of an element are determined atuomatically. But we can specify them:

h1 {height: 20px; width: 400px;}

Height and width refer to the content of an element. This means that margins, borders, and paddings are added to the height and/or width to get the total amount of space an element occupies.

If the height and/or width of an element is set, but the content is too big to fit, what happens? Normally, the UA is allowed to expand the element to allow all the content to fit, but there are other options controlled by the overflow property. Possible values of overflow are:

• visible (the default)
• hidden (making it impossible for the user to see)
• scroll (the UA puts in a scroll-bar or its equivalent so the user can scroll through the content)
• auto (leave it up to the UA how to handle the overflow)
• inherit (use the value set for the parent element)

This feature is implemented poorly in many browser versions.