Placement Example from this article

div.blob {
    width: 151px;
    height: 151px;
    background-image: url('images/blob.png');
}

div#blob1 {
    float: left;
    margin-top: 100px;
    margin-left: 300px;
}

div#blob2 {
    position: absolute;
    top: 100px;
    left: 300px;
}
			

The main difference between floating and absolute positioning is that absolute positioning is relative to the top left corner of the window.

When you float something and then say mrgin-top: 20px; It will be 20 pixels below whatever element is above it, and it will always stay inside of it's parent element. See, Blob 1 down there, I have it set to be 100px below this paragraph.

Also note, if you were to draw a line from the left side of Blob 2, it would not hit the left side of Blob 1; even though they are both set to 300px left. This is because of the default padding on the body, which the floating Blob 1 has to account for.

Polyesterhat's Blog