If you are the copyright holder of one of the photos used in this presentation and you would not like it to be used in an academic context, please contact me and I will remove the image from the presentation. I have made sure that only images are use that are available under the Creative Commons licence.

1. CSS Layout – Steps
http://flic.kr/p/9P5DTb

2. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.

3. News Static Login
#news #info #login

4. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?

5. The Golden Ratio
goldenratiocalculator.com

6. Grid Based Designs http://grid-based.com/

7. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…

8. 28% + 2% + 50% + 2% + 18% = 100%
220px + 20px + 480px + 20px + 220px = 960px
It needs to add up
or your layout will break!

9. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…
4. Apply the values in the CSS!
Try to be as concise as possible!

10. #red {
background-color: red;
width: 18%;
height: 400px;
margin: 0 2% 0 0;
}
#green {
background-color: green;
width: 50%;
height: 400px;
margin: 0 2% 0 0;
}
#blue {
background-color: blue;
width: 28%;
height: 400px;
margin: 0;
}

11. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…
4. Apply the values in the CSS!
Try to be as concise as possible!
5. Choose the method of layout!
Is it going to be float or position?

12. VS
http://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc
• text related images • elements in a
• varying heights in concreted position
column layout • need to overwrite
( less hassle) document flow
• listing things • flexible
(document flow • need to overlap
matters)

13. VS
http://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc
Rule
If elements should not interact, use absolute
positioning, if they should, use floats.
—says Kilian Valkhof
kilianvalkhof.com

14. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…
4. Apply the values in the CSS!
Try to be a concise as possible!
5. Choose the method of layout!
Is it going to be float or position?
6. Apply the method in the CSS!
Know where to put things!

15. #red { #red {
background-color: red; background-color: red;
width: 18%; width: 18%;
height: 400px;
height: 400px;
position: absolute;
margin: 0 2% 0 0;
top: 0;
float: left; left: 0;
} }
#green { #green {
background-color: green; background-color: green;
width: 50%; width: 50%;
height: 400px; height: 400px;
margin: 0 2% 0 0; position: absolute;
top: 0;
float: left;
left: 20%;
}
}
#blue { #blue {
background-color: blue; background-color: blue;
width: 28%; width: 28%;
height: 400px; height: 400px;
margin: 0; position: absolute;
float: left; top: 0;
} left: 72%;
}

16. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…
4. Apply the values in the CSS!
Try to be as concise as possible!
5. Choose the method of layout!
Is it going to be float or position?
6. Apply the method in the CSS!
Know where to put things!
7. Rewrite the CSS with combined selectors
and shorthand notation!

17. #red {
background-color: red;
width: 18%;
height: 400px;
margin: 0 2% 0 0;
float: left;
}
#green {
background-color: green;
width: 50%;
height: 400px;
margin: 0 2% 0 0;
float: left;
}
#blue {
background-color: blue;
width: 28%;
height: 400px;
margin: 0;
float: left;
}

18. #red { #red {
background-color: red;
width: 18%;
height: 400px;
margin: 0 2% 0 0;
float: left;
} }
#green { #green {
background-color: green;
width: 50%;
height: 400px;
margin: 0 2% 0 0;
float: left;
} }
#blue { #blue {
background-color: blue;
width: 28%;
height: 400px;
margin: 0;
float: left;
} }

19. #red, #green, #blue { #red {
height: 400px; background-color: red;
float: left; width: 18%;
}
#red, #green {
margin: 0 2% 0 0;
} }
#blue { #green {
margin: 0; background-color: green;
} width: 50%;
}
#blue {
background-color: blue;
width: 28%;
}

20. #red, #green, #blue {
height: 400px;
float: left;
}
#red, #green {
margin: 0 2% 0 0;
}
#red {
background-color: red;
width: 18%;
}
#green {
background-color: green;
width: 50%;
}
#blue {
background-color: blue;
width: 28%;
margin: 0;
}

21. CSS Layout – Steps
1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!
Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!
Sorry, you need to do some maths here…
4. Apply the values in the CSS!
Try to be as concise as possible!
5. Choose the method of layout!
Is it going to be float or position?
6. Apply the method in the CSS!
Know where to put things!
7. Rewrite the CSS with combined selectors
and shorthand notation!