Jan's CSS: Position

With CSS you can position objects on the page without using a positioning table. You can force objects to overlap or place them side-by-side. It seems like an easy task, but it is a bit more complex than other CSS formatting. You must set several properties to ensure that your object is in just the right place.

Method 1: FLOAT property

An element that floats allows text and images to wrap around the object. This method is commonly used for images but works with other elements, too.

What you need:

• Container for the element you want to position.
  Most often this is the IMG tag or a DIV container.
• Float property: Can have the value left or right

Example: Float left and right

This text is justified. The inline style applied to each image makes it float. Text will wrap around the floating images, even though the code for both images comes before the text in the source code!

Style code for floating:

float:left; or float:right;

Method 2: POSITION property

What you need:

• Container element with width set: This is most often the BODY tag or a DIV especially created to be a container. Set its width (usually pixels or percentage).
• Position property: relative, absolute, or fixed
• Width property: most commonly in pixels, or percent
• Top, left, right, bottom properties: most commonly in pixels or percent and are measured from the top left corner of the container. You don't need to set them all! Top and left are commonly set together. Negative values are allowed!
• Height property: Is often needed to avoid leaving empty space where the element would have been if you had not positioned it.

Styles for container for examples: Sets position, width, and height.

Width and height for each green box is set in the class boxmodel in the internal style sheet for the page. The position, top, and left properties for each green box are set in an inline style.