CSS design techniques..from my experience

1. Position: Relative is used to change its position from its original position where it has to be appeared. But it occupies the space it required and does not come out of document object. It is not related to the containing div.

2. Position: Absolute is used to change its position relative to its container. It leaves its original position and width i.e. it does not occupy any height and width in normal div flow. and it draws on the fly.(but it is happening with respect to browser client , it is mentioned wrong in W3C tutorial).

3. Position: Fixed is also according to browser position.

4. Position: Static is according to its normal flow is by default.

5. If width of the contained div is greater, then it will come out with that amount, but the containing div will not expand.

6. If height is greater than containing div height, it will come out with that amount, but the containing div will not expand.

7. Containing div will expand only if we do not mention its height or width.

8. After margin is specified and we positioned with relative by certain amount it will shift with that amount after shifting with that amount, (applies to margin-left and right (not verified) only). For margin top, it will not shift by that amount but what is happening is that containing div is shifting.

9. When we specify the margin-top in child div, but it applies to parent div not in the div which we specified as child div.

10. If I add padding in the div, its width will increase with that amount not height (no sure) but width only is specified. So don’t specify dimension of width if padding is to be done. (Mozilla takes both but IE takes padding only) i.e. if padding will be added to the width of div if div width is specified otherwise not.

—————————————————————————————————————–

11. Regarding point 10, what I found is that, margin is taken according to the div in same level. So, for the first div and container div it will be same…That’s why you should specify padding in the container div for little shifting.

12. If you have to float with padding then, specify only after decreasing the amount by padding size and same applies to margin.



Summary

While designing in CSS, always go with two column architecture. I.e. if you need three columns, first make two column div; then again make two column of one of previously made column.

For rows you can go any way, single div element is single row, which contains any number of rows.

Be careful with using positioning, relative positioning is concerned with shifting of original position of an element and occupies width and height whereas absolute is done with respect to client browser and it completely release its place and another element is sequence occupies that space.

While specifying padding, if width is specified of the particular element, then it will be added to the width of that element and may cross other’s zone and if width is not specified, it will adjust according to the width of container div.

Same applies to margin, but the only difference is that; margin pushes the element whereas padding pushes element’s contents. (You can see in margin behavior and compare in Mozilla and IE7).