Collected by
Elizabeth Janson

Home Page

Block Positioning

  I would like to know if there is a way to use CSS and the 'position:absolute;" command to place tables on pages, but still have them scalable, say if someone resized a browser.

Yes, just put it in <div class="positionedsomewhere" > OR even easier just add <table class="positionedsomewhere"...

And then (preferably in a linked CSS =)
.positionedsomewhere {
position: absolute;
top: Xpx;
left: 50%;
}

Positioning schemes

In CSS2, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
Note. CSS2's positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.

Choosing a positioning scheme:

'position' may have the properties 'static', as shown above where the normal flow of the text is maintained.
as 'relative', where the box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
'absolute' and 'fixed' are the other choices.

Box offsets: 'top', 'right', 'bottom', 'left'

An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:
top specifies how far a box's top content edge is offset below the top edge of the box's containing block.
right specifies how far a box's right content edge is offset to the left of the right edge of the box's containing block.
bottom specifies how far a box's bottom content edge is offset above the bottom of the box's containing block.
left specifies how far a box's left content edge is offset to the right of the left edge of the box's containing block.

Compact boxes

A compact box behaves as follows:

  • If a block box (that does not float and is not absolutely positioned) follows the compact box, the compact box is formatted like a one-line inline box. The resulting box width is compared to one of the side margins of the block box. The choice of left or right margin is determined by the 'direction' specified for the element producing the containing block for the compact box and following box. If the inline box width is less than or equal to the margin, the inline box is given a position in the margin as described immediately below.
  • Otherwise, the compact box becomes a block box.

The compact box is given a position in the margin as follows: it is outside (to the left or right) of the first line box of the block, but it affects the calculation of that line box's height. The 'vertical-align' property of the compact box determines the vertical position of the compact box relative to that line box. The horizontal position of the compact box is always in the margin of the block box.

An element that cannot be formatted on one line cannot be placed in the margin of the following block. For example, a 'compact' element in HTML that contains a BR element will always be formatted as a block box (assuming the default style for BR, which inserts a newline). For placing multi-line texts in the margin, the 'float' property is often more appropriate.

The following example illustrates a compact box.

    <STYLE type="text/css">
      DT { display: compact; background-color:paleturquoise }
      DD { margin-left: 4em; background-color:mistyrose}

    <DL>
      <DT>Short
        <DD>Description goes here.
      <DT>Small
        <DD>Description goes here.
    </DL>

And in real life -
Short
The 'text-align' property can be used to align the compact element inside the margin: against the left edge of the margin ('left'), against the right edge ('right'), or centered in the margin ('center').
Small
The value 'justify' doesn't apply, and is handled as either 'left' or 'right', depending on the 'direction' of the block-level element in whose margin the compact element is formatted. ('left' if the direction is 'ltr', 'right' if it is 'rtl'.)

list-style: outside; background-color:paleturquoise

  • outside list item comes first
  • second list item comes second
list-style: inside
  • inside list item comes first
  • second list item comes second

Relative and absolute positioning may be used to implement change bars, as shown in the following example.
<P style="position: relative; margin-right: 20px; left: 50px;">
I used the red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; 
left: -2em; color: red; font: bolder 150%;">----</SPAN>
word.</P>

I used the red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS ---- word.

Email
CSS begins here
Back to inline positioning or on to absolute positioning.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.