1. HTML – Organizing Page Content

2. CSS for layout
Examples

3. Generic Elements <div>…</div> Name them using id or class
Used to create a logical grouping of content or elements on the page Can be customized to describe content
<div>…</div>
Generic block-level element
<span>…</span>
Name them using id or class
Have no inherent presentation qualities of their own, but can use style sheets to format them
-allows you to accurately describe content
-creates a “hook” for adding style rules

4. HTML 5 Elements <section>…</section>
Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)
<section>…</section>
May be used to divide pages into major sections | major thematic sections
<section> <h2>Typography Books</h2> <ul> <li>…</li> </ul> </section>
<article>…</article>
May be used for self-contained works that could stand alone or be reused in a different context
<article> <h1>Get To Know Helvetica</h1> <section> <h2>History of Helvetica</h2> <p>…</p> </section> </article>

5. HTML 5 Elements <aside>…</aside> <nav>…</nav>
Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)
<aside>…</aside>
Related to the surrounding content
<nav>…</nav>
Primary navigation links
<header>…</header>
Introductory material for page, section, or article
<footer>…</footer>
Footer for page, section, or article
<address>…</address>
Contact information

6. CSS for layout
Examples

7. CSS – Positioning & Layout

8. CSS Normal Flow Normal Flow Top -> bottom | left -> right
Arranged in the order they appear in the code
make room for one another (objects affect the layout of the objects around them)

9. CSS Positioning Float Values: left | right | none
Floating allows us to alter the normal position of an element by moving it to the leftmost or rightmost edge of its parent element
Values: left | right | none
Ex: img {float: right;} Positions an element to the left or right allowing surrounding content to wrap around
Floating inline Elements
Must provide width & height values
Floating Block Elements
Elements do not float higher than their reference in the source code

10. Float
Removes object from normal document flow

15. CSS Positioning Clear Values: left | right | both | inherit | none
The clear property allows us to turn floats off and return to normal document flow.
Values: left | right | both | inherit | none
Ex: .element 1 {clear: right;} breaks down to the next line and returns to normal document flow.
Prevents elements from appearing next to a floated element
clear: left – nothing allowed to float to the left
clear: right – nothing allowed to float to the right
clear: both – nothing allowed to float to right or left

16. CSS Positioning Position Values: static | relative | absolute | fixed
Static: elements positioned as in normal flow
Relative: moves an element relative to its original position
- space it would have occupied is preserved (empty space left behind) - overlap happens
offset
Values: top | right | bottom | left
Defines the distance the element should be moved
Ex: em { position: relative: top: 30px: left: 60px: }

17. CSS Positioning

18. CSS Positioning Position Values: static | relative | absolute | fixed
Absolute: removes elements from normal document flow
- Absolute position elements have NO influence on layout of surrounding elements - Positioned relative to its containing element - Space it would have occupied is closed - Overlap happens

19. CSS Positioning Containing Blocks
If the positioned element is not contained within another positioned element it is placed relative to the html element (initial containing block)

20. CSS Positioning Containing Blocks
If the positioned element is not contained within another positioned element it is placed relative to the html element (initial containing block)
If element has an ancestor that has positioning set (relative, absolute, fixed) – it is placed relative to its containing block
Relative positioning commonly used to a create positioning context for absolutely positioned elements

21. CSS Positioning
Pixel measurements
Percentage values

22. CSS Positioning Position Values: static | relative | absolute | fixed
Fixed: element fixed in one position (does not scroll)
- Similar to absolute positioning - Offset values are always relative to the browser window (viewport)

23. CSS Positioning Stacking Order Absolutely positioned elements overlap
Elements stack in the order they appear in the source doc
Z-index (change the stacking order)
Higher the z-index – the higher the element will appear in the stack

24. CSS Page Layout Liquid (fluid): Page reflow in browser window
Advantage: Design for any monitor resolution
Disadvantage: may end up with long lines of text (uncomfortable to read)
Fixed: Page stays a specific pixel width
Advantage: predictable layout, more control
Disadvantage: right edge may not be seen on smaller browsers
awkward leftover spacing on large screens
Elastic: layout expands and contracts with size of text (em based)
Advantage: provides consistent layout while allowing flexibility in text size
Disadvantage: images can’t be dynamically resized
Responsive

25. CSS - Layout
Fixed (pixel based) Layouts

26. CSS - Layout
Fluid (percentage based) Layout

27. CSS - Layout
Hybrid

28. Let’s see how this works…