The document discusses CSS layout techniques including: 1. Width and height which always refer to the content area and other values add to it 2. Using margin and padding for better usability and readability 3. Floating elements left or right and their relation to surrounding text 4. Positioning elements statically, relatively, absolutely or fixed 5. Semantic layout with HTML5 elements like <header> and using importance and position.

1. Layout
Presenting Content – Session “CSS Layout Techniques”

2. CSS Layout Aspects
1. Width and Height
2. Margin and Padding
3. Floating Elements
4. Positioning
5. “Semantic” Layout

3. Exkursion: The Box Model
margin
border
padding
Content
margin edge padding edge
border edge content edge

4. The Box Model in Real Life

5. The Box Model in Real Life
margin
ca. 20px
border
0px
padding
ca. 10px
content
width:
ca. 100px

6. 1. Width and Height
width and height
always refer to the
content, all other
values add up to that.

7. 2. Margin and Padding
better usability
• Use to implement perception laws
• Use to make the layout less stuffed
better readability

8. 3. Floating Elements
floats left
floats right
relation of image to
surrounding text?!?

9. 4. Positioning
• static (no specific position,
normal flow)
• relative (relative to itself)
• absolute (in relation to parent)
• fixed (in relation to viewport)

10. 4. Positioning
• new HTML file
• 3 divs
• 3 different colors
• CSS for document only

11. 5. “Semantic” Layout
a. Importance and Position
b. <div> vs HTML5
An area in XHTML… …becomes an element in HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="footer"> <footer>

12. 5. “Semantic” Layout
c. Position and Relation
„Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt
ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercita-
tion ullamco laboris nisi ut ali-
quip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.