POSITIONING overview

Positioning is at the heart of webdesign, and one of the most interesting and challenging aspects of webdesign, largely because positioning requires an understanding of how all the parts fit together. Even the most accomplished of designers don't have it all memorized, but they have systems with which they rely and are governed, such as:

5 kinds of positioning

Static, Relative, Absolute, Fixed and Floats

see lynda training example: CSS Positioning Best Practices 2

Static Positioning

Basically, an element that is not positioned is considered static, the only time you would specify static as a position is if you want to override a previous position. Rarely used!

Relative positioning

Typical use: as a container div for absolute positioning. The width is given in relationship to the browser viewport. Without the container div, subsequent positioning would relate to the browser window default, not where you want it in the viewport.

What it positions: relative positioning can relatively position any type of box except for absolute boxes.

see lynda training example:CSS Positioning Best Practices

div#outer

* Absolute positioning

Typical use: as columns, used absolute widths (include padding in overall)

see lynda training example:CSS Positioning Best Practices

Float positioning model: positions float boxes

* Fixed Positioning (also see absolute box models)

Typical use: menus & branding images. Placing a fixed object is very easy and creates unusual visual interest. In the days of framed websites, the logos and menu were fixed so the branding and navigation was almost always in the view space. Personal opinion: I feel that we will be returning to fixed menus and branding, but we will be controlling that layout in CSS based standards compliant sites. That probably won't happen until the bloated and tedious coding required for IE goes away (that will be like Christmas coming early). In the meantime, include a fixed positioned image in your sites to set yourself apart from other designers.

see lynda training example: CSS Positioning Best Practices

Float positioning (also see types of box models)

2 typical uses: images & columns

    1. Positioning images: to the left or right, with text wrapping around image. If you don't want the text to warp you add a clear style (left or right) directly into your HTML document. The style will be defined in your CSS file.
    2. Columns: to the left or right, if you have more than one column, set all columns to left, and add a clear class (defined in your CSS) to your HTML

see lynda training example: CSS Positioning Best Practices

img.floatLeft

Float positioning model: positions float boxes

Relative - Float positioning: relativelypositions float boxes

Note: float positioning is one of the most difficult concepts to understand, so be patient. This will take time, and then the coin will drop.

Float image left

float left imageNOTE: The text will automatically wrap around image and drop below the image. justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Don't forget to set the padding to conform to the left or right aesthetic specific to your use.

Float image right

float rightNOTE: The text will automatically wrap around image and drop below the image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Don't forget to set the padding to conform to the left or right aesthetic specific to your use.

Summary

There are five basic positioning methods (static, relative, absolute, fixed and floats). You can use all of them in your websites. They basically the rules that govern how your boxes are positioned. Boxes go hand in hand with understanding how to position. There are basically six kinds of Box Models - see menu for an overview of Box Models.