CSS Positioning

Topic Overview

Sizing

Basic Layout The Box Model Boxing Sizing Min and Max Values TODO

Overflow

Dealing with Spills Overflow in Practice TODO

Borders

Drawing Edges Properties Radius Borders in Practice TODO

Padding

Giving Some Cushion Padding in Practice TODO

Margin

Adding Separation Margins in Practice TODO

Display

What You See... Properties Display In Practice TODO

Hidden

...And What You Don't Hiding in Practice TODO

Position

Placement on the Page Normal Position Relative Position Absolute Position Fixed Position Positioning in Practice TODO

Z-Index

The Z-Index and Layering Z-Index in Practice TODO

Float

Floating Clearing Float Float in Practice TODO

Margins in Practice

In the following example, look at the two containers and their position based on the margin settings.

Margin and Padding Combined

In the next example, notice how the .child-container-03 has both margin and padding properties set. Also, notice that the parent container does not have either. Note that the browser does not allow the child container’s margin to push the parent container’s height. However, it still creates space between the top of the containing window and the parent and child elements.

Using Margin to Set Center Alignment

The margin property is also used to center-align an element horizontally in its parent element. This can be accomplished by setting the properties value to auto, or by setting both margin-left: auto; & margin-right: auto;.