[HTML][CSS] Different Position Relative and Float Left or Right

Deskripsi

     Untuk mengetahui perbedaan antara Position relative dengan Float left atau right, sebelumnya kita harus mengetahui konsep dari div itu sendiri.      

Howto

     Div Concept :

* Text or Image is the content of the Div , so to change appearance just add CSS style on div
* Padding is space between text/image and div line
* Margin is space between div line with margin line (not exist just conceptual)
* Position is space between margin line (not exist just conceptual) with outer line (not exist just conceptual)

so the case is what's the different ??

* Position Relative, the div element still intact with the Html Element, and i consider the 'position space' use a maximum width (whatever you change width the div, 'position space' still use maximum width) , that's why no another element beside the div and the element shifted down with another element which same element property.

* Float left / right, the div element still intact with the Html Element, BUT it remove 'Position Space' so the outer line is margin line (does not exist just conceptual), and the div fill the empty space to the top but it adjust with the current width and the element shifted left or right with another element which same element property.

what about absolute ? absolute same as float remove 'position space' but the element NOT intact with the Html Element and another element , so it can stack with the same div which use the same position.

hope's this help !!