What is LessonUp
Lesson library
Channels
AI tools
Log in
Start for free
‹
Return to search
floating -two child in Parent div
Layout Proficiency
Please go through the lesson on the layout before completing this lesson.
You will learn how to use , float and clear fix to complete your layout. Thank you
1 / 10
next
Slide 1:
Slide
Online word
Lower Secondary (Key Stage 3)
This lesson contains
10 slides
, with
interactive quizzes
,
text slides
and
1 video
.
Start lesson
Save
Share
Print lesson
Report this lesson
Items in this lesson
Layout Proficiency
Please go through the lesson on the layout before completing this lesson.
You will learn how to use , float and clear fix to complete your layout. Thank you
Slide 1 - Slide
6
Slide 2 - Video
00:00
No element inside the main div means
A
Main div has no width
B
Main div has no margin
C
Main div has no border
D
Main div has no height
Slide 3 - Quiz
21:11
write down the div tags that could be used to create the layout. include the name of the ID
observe the layout
Slide 4 - Open question
21:50
.clearfix::after{content:""
display:block;
clear:auto;}
the height of the parent usually goes to "0 px" after float- select all the correct options
A
Yes because the parent has no contents
B
If you did not use this instruction you wont see the background colour of the parents
C
The instruction is necessary to make parent height to equal the child's height. parent div to
D
None of the above
Slide 5 - Quiz
23:39
Name the ids
Slide 6 - Open question
24:12
Name the six formatting tags that is applied to the "parent div"
Slide 7 - Open question
30:12
Explain the diagram
Slide 8 - Open question
Thank you for learning with us
Outcome you should understand and apply
1. floating
2. layout using div tag
3. clearfix
4. normalisation
Slide 9 - Slide
The End
Slide 10 - Slide
More lessons like this
Sorting
July 2026
-
5 slides
New lesson editor
CPD
Training
+1
Primary Education
Lower Secondary (Key Stage 3)
Upper Secondary (Key Stage 4)
LessonUp Inspiration
Case Study - Operation Icefish (Secondary)
April 2021
-
15 slides
Science
Geography
+4
7-9 Grade
9-11 Grade
SEA SHEPHERD
Case Study - Operation Icefish (Secondary)
December 2022
-
15 slides
Science
Geography
+4
7-9 Grade
9-11 Grade
SEA SHEPHERD
Quiz: Cartoons
September 2024
-
34 slides
Design and technology
Lower Secondary (Key Stage 3)
Upper Secondary (Key Stage 4)
Further Education (Key Stage 5)
Primary Education
Quiz: Cartoons
August 2024
-
34 slides
Design and technology
Lower Secondary (Key Stage 3)
Upper Secondary (Key Stage 4)
Further Education (Key Stage 5)
Primary Education
Quiz!
The Pope
26 days ago
-
25 slides
New lesson editor
LessonUp Inspiration
News quiz - Week 20 (30 seconds)
May 2025
-
13 slides
Citizenship
News
+3
Lower Secondary (Key Stage 3)
Upper Secondary (Key Stage 4)
Further Education (Key Stage 5)
LessonUp News Quiz
News quiz - Week 20 (10 seconds)
December 2025
-
13 slides
Citizenship
News
+3
Lower Secondary (Key Stage 3)
Upper Secondary (Key Stage 4)
Further Education (Key Stage 5)
LessonUp News Quiz