The last article I posted was about padding and margins, the key to both of those items is that, in order to be effective, they must be used as part of elements that are given a position or float. I am going to attempt to show the differences between these two tools, and help you decide what is the best method for your design.

What Is Position?

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.

Positioned elements can be moved around the layout using the left, right, top and bottom rules and a pixel or percentage value. When an element is not positioned within another element, the measurements will be calculated using the browser window: And element that is 100x 100, positioned alone, with a left value of 20px will be placed 20px off of the left-most side of the browser window.

However, when an element is positioned inside another positioned element, in this case a second box with a left value of 20px, the 20px will be calculated from the left side of the container. Below you will see two elements, the first with a left of 20px, and a second, inside that element, with a left of 20px.

Positioning seems to work well in IE with little bugs, however I generally use positioning as a last resort. Using float on elements allows for more flexibility when dealing with repeating backgrounds as well as expanding your content and layouts to the browser window size.

Relative Positioning

Relative position is close to floats in terms of how they work. They can be moved around using either the top, right, left, bottom rules or by margins like floats can. Relative positioning changes the element without influencing the layout of other elements.

The element technically remains in the document flow, but will be “relatively” positioned in it. If we have 3 elements and gave the middle element a position relative and a bottom of 40px, the element would move up 40px, but the element below it will not move at all, as if the middle element never moved.

div { width: 100px; height: 100px; border: 1px solid #000; background: #CCC;}
div.middle { position: relative; bottom: 40px; }

Absolute Positioning

Absolute positioning removes the element from the document flow altogether. The other elements around it will move together and act as if the absolute positioned element never existed.

Fixed Positioning

Fixed positioning is the same as absolute positioning, except it’s always positioned against the user’s browser window independant of the contents of the page, and remains motionless as the user scrolls up or down in the browser. Fixed positioning doesn’t work in IE6 and below.

What Are Floats?

Floats are elements that are literally “floated”, so that they render side by side to each other. The float rule accepts three values: left, right and none. Floated elements can only be moved using margins, not by using the top, left, right or bottom rules.

Let’s say we have 2 boxes with a width of 50%. Normally, these boxes will appear one beneath the other, but if we give both boxes a float left, each box will render side by side.

If there’s no height and width specified on the floated element, the element will automatically size itself to the content inside just like inline elements, even though a floated element is consider a block element. Also, non-floated elements will ignore floated ones in document flow, creating layout issues, so it’s important to either float all your elements in a container, or none of them.

Floating your elements left and right will solve a lot of weird browser issues. Unfortunately, modern browser deal with float rights differently than older browsers (including the IEs).

In modern browsers, you can either float right the element before or after the left float element, and it will render the same. For example, if the boxes had a width of 30% and the first one had a float left, and the second a float right, it would render correctly like:

However, in older browsers, the floated right element has to come before the floated left element, otherwise it will render slightly below the left element. So, if we were to take the same example as above and check it out in an older version of Safari, or even in IE7, here’s an idea of how it would render:

Which is better?

I prefer to float my elements and only use positions when breaking the layout. However, you’ll quickly come to figure out which works for your coding style better, so try experimenting with different floats and positions for all your layouts!