1. CSS Layout
Lim Borey
Phnom
Penh
.
Sunday
3rd
February
2013
WebDesignMeetup
@limborey
www.limborey.com

2. Content WebDesignMeetup
• Box Model
• Positioning
– Relative
– Absolute
– Fixed
• Grid System

3. Box Model WebDesignMeetup
Padding
Margin
Content
Border
#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}

4. Box Model WebDesignMeetup

5. Positioning WebDesignMeetup
• 2 types of virtual formatting elements
– Block-level element: div, p, h1, …
– Inline element: span, strong, …
• 3 basic positioning schemes
– Relative
– Absolute
– Fixed

6. Positioning: Relative WebDesignMeetup
• If you relatively position an element, it will
stay exactly where it is.

7. Positioning: Absolute WebDesignMeetup
• absolute positioning takes the element out
of the flow of the document, thus taking up
no space

8. Positioning: Fixed WebDesignMeetup
• Is a subcategory of absolute positioning.
• The difference is that a fixed element’s
containing block is the viewport. This allows
you to create floating elements that always
stay at the same position in the window

9. Floating box WebDesignMeetup
• A floated box can either be shifted to the
left or the right until its outer edge touches
the edge of its containing box or another
floated box.
• floated boxes aren’t in the normal flow of
the document, thus block boxes in the
regular flow of the document behave as if
the floated box wasn’t there.

10. Floating box WebDesignMeetup

11. Floating box WebDesignMeetup

12. Floating box WebDesignMeetup

13. Grid System WebDesignMeetup
Case
study:
Twi?er
Bootstrap’s
grid
system