Positioning

Learning Objectives:

In this section, students will:

  • See how positionally works with CSS
  • Review float and alignment rules.

Positioning

In general, there are three loose types of positioning in CSS: in-line, block, and containers. HTML elements like STRONG and EM are examples of in-line displaying. They are shown in-line with the other elements around them. Headers and the paragraph element use a block display: they influence and shift the elements around them because of default width and height values based on their content. The third type, containers, are those which group other elements, but are are treated as in-line unless a rule exists to override it.

When new CSS position rules are used on elements, they change how they are positioned in regard to their default rules and often in relation to the elements around or near them.

Float

1_float.png

The CSS rule of float is often explained as a type of “wrap.” That is, when the float rule is used on an element, it is removed from the normal display flow and shown “wrapped” on either end of its parent element or until it “runs” into an element that blocks it.

Float 2

The float rule has two common values: left and right. Depending on which is used, the element will “float” to that end of the content with regard to its parent element.

Alignment

Heading and Paragraph Alignment

Aligning elements horizontally or vertically can be a difficult task because of the default display positioning of some elements. Text content, for example, can easily be aligned through using the text-align rule and specifying either left, right, or center.

For mixed content, or for containers with multiple elements, there is often not a single rule for making content centered or aligned in a single direction. The reason for this is in how the different display positions of block and in-line interact with each other: rules would need to be added to tell the in-line elements to work one way and to tell the block elements to change their defaults.

Margin Auto

However, even with the general difficulties, two general solutions exist. The first is the use of margin: auto. Because the box model of CSS uses margins to balance the layout of content in regard to its left and right positioning, giving a container like the FOOTER tag a width, height, or both shifts it to use the block display positioning. Because it is now using the block display, the “auto” usage in a margin rule will make it horizontally aligned in relation to the other elements around it.

Padding Rule

The second solution is to use a mix of top and bottom values in a padding rule to help in vertically aligning elements.

Border

Position

While rules like float and text-align exist, there is also a rule called position that defines how an element should be displayed in regard to the screen itself. It has four possible values: static, relative, fixed, and absolute.

The position rules is also paired with one or more other rules defining which side of the screen to use as reference for the position. These are left, right, top, and bottom.

Position rule image

By default, elements use a position rule with a value of static. Setting a position of  relative, however, positions the element in relation to its parent. For example, to increase the indent of line items in both order and unordered lists, rules could be added to use position: relative and left: 5px to move all line-items five pixels away from their left edge.

[Position fixed image]

The rules and values position: fixed and position: absolute vary in a small but very important way. On pages that do not scroll, they act the same.

However, the value of fixed is different than absolute. When an element is positioned with a value of absolute, it will retain in that place on the page. When using fixed, the element will seem to move as the page is scrolled, as it is “fixed” to the screen and not the document itself.

Position fixed GIF

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from the HTML modules, change the placement of any images in your document.

  • Use the float rule to "float" an image either left or right of the content below it. 

Test your response on Mozilla Thimble!