Larger Text Normal Text Smaller Text

IT 280 Web Development II, Spring 2008

 
  1. Syllabus
  2. Weekly Topics
  3. Assignments
  4. Online Resources
  5. IT 280 Forum

The CSS Box Model - Part II

Screen Coordinates

x goes right; y goes down The horizontal and vertical coordinates on the screen increase from left to right and top to bottom. Notice that the vertical axis is reversed from the familiar coordinate system of analytic geometry.

Relative Positioning

Once the position of a box has been determined according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box in this way has no effect on the boxes that follow: they are given a position as if the original were not offset. This implies that relative positioning may cause boxes to overlap.

The values of the right, left, top, and bottom attributes offset the box from its normal positon. The following example is basically the same as the first float example, with relative positioning added. The graphic has been moved left and down, without affecting the position of the flowed text. The text wraps around the box where the image was before the position change, not where it is moved to.

Relative positioning

      <div style="width: 200px; 
                    border: solid thin #f00;">
        This is a bunch of text. This is some text. 
        Here's another bit of text. Where's the wrap?
        <img style="float: left;
                    position: relative;
                    left: 20px;
                    top: 20px;
                    width: 50px;
                    height;50px;" 
            src="graphics/css/yelblock.gif" 
            alt="" />
        Still more text. Yes another chunk of text.  
        The text thinks the image is over on the side.
      </div>
This is a bunch of text. This is some text. Here's another bit of text. Where's the wrap? Still more text. Yes another chunk of text. The text thinks the image is over on the side.

Absolute positioning

In absolute positioning, right, left, top, and bottom values are used as offsets from the containing block and other boxes act as if the box were not there. If the element has 'position: absolute', the containing block is established by "the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', ..."

The next example is similar to the previous one. The outer div is is given 'position: relative' so that it will be considered the containing block. Otherwise the image should have been positioned with respect to the entire window.

Absolute positioning

      <div style="width: 200px; 
                    border: solid thin #f00;
                    position:relative;">
         This is a bunch of text. This is some text. 
         Here's another bit of text. Where's the wrap?
        <img style="position: absolute;
                    left: 20px;
                    top: 40px;" 
            src="graphics/yelblock.gif" 
            alt="" />
         Still more text. Yes another chunk of text.  
         The text wrap ignores the image block.
      </div>
This is a bunch of text. This is some text. Here's another bit of text. Where's the wrap? Still more text. Yes another chunk of text. The text wrap ignores the image block.

Fixed positioning

In fixed positioning, right, left, top, and bottom values are used as offsets from the viewport, not the block. As with absolute positioning, other boxes act as if the box were not there. Absolutely and relatively positioned elements will scroll with the containing block, but fixed elements should not. (IE gets it wrong.)

A reference page for ISO character entities uses a fixed block to create a heading area at the top that is always visible. The style rule is 

          position: fixed; 
          top: 0; 
          bottom: auto;          
          left: 0; 
          right: 0; 
          height: auto;           /* Will adjust to text size */
          padding: 2px 0 2px 0px;
          white-space: nowrap;    /* Will not break long lines */
          width: 100%; 
          background-color: #fff; 
          text-align: center; 
          border-bottom: 1px solid #555; border-top: 1px solid #000;

Note: The reference can be installed as a sidebar from http://wyrd.hood.edu/%7Eechang/csci581/Summer04/sidebars/install.html

The Topics Index for this class uses fixed positioning to create a permanent menu on the bottom right.

Because fixed positioning, like absolute, removes the box from the flow, the weekly topics blocks have a right margin as wide as the menu's box. Otherwise the text would overlap the fixed box.

A similar fixed menu is used for the W3C Style Sheet pages, and the technique is explained on the Tips and Tricks page.

Compliance: Designer's headache

Note that Internet Explorer may not implement the fixed position correctly according to the standard, so the effect does not work. (This flaw has been corrected in IE 7.)

Liquid design for accessibility

Both relative and absolute position can produce precise control over the positionn of elements, but their effect depends on both the browser's support and the display. However screen resolutions and available screen space will vary from user to user.

In liquid design the web page adjusts itself to the available space, just as a liquid takes the shape of the container it is in. It should also adjust to variations in the user's default font size settings. Graphic designers (and clients) sometimes prefer rigid styles because they are trying to reproduce the look of printed material. I have been asked to make text precisely 3 inches wide and to exactly match color swatches, to which I can only respond "Using which browser version, on what specific monitor, with what settings, under which phases of the moon?"

CSS Zen Garden

The CSS Zen Garden site demonstrates how stylesheets can change the presentation of a page dramatically.

The HTML source page is not changed. Graphic designers submit stylesheets. When these notes were written, there were 195 different official designs hosted on the site and 885 total designs.