This presentation given for developers at Truelogic Software Solutions is about CSS and layouting. It is explained all the ways to re-position an element in the screen.

1. TRUELOGIC SOFTWARE SOLUTIONS

2. Layout
“ Layout is the sizing, spacing, and placement of
content within a window or page
”
w w w . t r u e l o g i c s o f t w a r e . com

3. No layout Table layout Box layout
1995 2010
w w w . t r u e l o g i c s o f t w a r e . com

4. Layout > No layout
w w w . t r u e l o g i c s o f t w a r e . com

5. Layout > Table layout
w w w . t r u e l o g i c s o f t w a r e . com

6. Layout > Box layout
w w w . t r u e l o g i c s o f t w a r e . com

7. Box Model
w w w . t r u e l o g i c s o f t w a r e . com

8. Box Model > Element
display: inline-block;
w w w . t r u e l o g i c s o f t w a r e . com

9. Box Model > Dimensions
w w w . t r u e l o g i c s o f t w a r e . com

10. Box Model > Padding
w w w . t r u e l o g i c s o f t w a r e . com

11. Box Model > Border
w w w . t r u e l o g i c s o f t w a r e . com

12. Box Model > Margin
w w w . t r u e l o g i c s o f t w a r e . com

13. Box Model > Offsets
margin-left, margin-right
w w w . t r u e l o g i c s o f t w a r e . com

14. Layout is the
sizing, spacing, a width
nd placement of height
content within a
window or page.
w w w . t r u e l o g i c s o f t w a r e . com

15. Placement
w w w . t r u e l o g i c s o f t w a r e . com

16. left
right
float none
left
clear right
both
position absolute
relative
fixed
static
w w w . t r u e l o g i c s o f t w a r e . com

17. Placement > Float
w w w . t r u e l o g i c s o f t w a r e . com

18. Placement > Float
w w w . t r u e l o g i c s o f t w a r e . com

19. Placement > Absolute
w w w . t r u e l o g i c s o f t w a r e . com

20. Placement > Absolute
w w w . t r u e l o g i c s o f t w a r e . com

21. Placement > Relative
w w w . t r u e l o g i c s o f t w a r e . com

22. Placement > Relative
w w w . t r u e l o g i c s o f t w a r e . com

23. Placement > Fixed
w w w . t r u e l o g i c s o f t w a r e . com

24. Placement > Fixed
w w w . t r u e l o g i c s o f t w a r e . com