CSS In Depth Part 2: Floats & Positions

Last week, in the first of our CSS In Depth post, we discussed the difference between paddings and margins, and what the box model is. This week we’ll be discussing positions and floats as well as what the differences are and when it’s best to use them. Both floats and positions deal with the relationship of elements between each other. Without these, padding and margins would be ineffectual.

Position rules are used to position the element in the document flow. The position rule can take four values: static, relative, absolute and fixed. The default value of every element is static, where each element comes after each one another in order.

Elements that are position can be moved around using the left, top, bottom and right rules and a pixel or percentage value.

If an element is not positioned inside of another positioned element, the left, top, bottom and right rules will calculate their values using the browser window. For example, if we have an element that’s 100 x 100px and positioned by itself, with a left of 20px, it will be exactly 20px to the left most side of the user’s window, no matter how big or small that is.