Preview
Video Player
00:00
00:00
The Solution
3:54Follow along to see how to lay out the web page using CSS floats.
How'd it go,
where you're able to write most, or
0:00
all the floats in CSS properties for
this practice session?
0:02
If not, no worries.
0:05
You can watch my solution,
compare it to what you wrote,
0:06
and then try to recreate it yourself.
0:08
Now let's go over this solution.
0:10
You can also reference this code
when you download the project files.
0:12
So first up, I applied a float
to LI tags inside nav using
0:15
a descendant selector that targets
LI elements inside the nav element.
0:19
Then I use the float property
to float the list items left,
0:24
which makes the floats follow the HTML
source order from left to right.
0:27
Next, I created a CSS rule that
targets the class image featured,
0:33
and set the float value to right.
0:38
That way, surrounding content flows
around the image's left side.
0:41
Then to create visual separation,
between the content and image,
0:45
I used the margin shorthand property
to apply a 15 pixel margin to all but
0:49
the right side of the image.
0:53
After that, I created a rule that
targets the class image article, and
0:59
applied a float left, so that content
flows around the right side of the images.
1:03
Then set margin right to 20 pixels.
1:08
Now image article, and
the article content div,
1:14
should be positioned next to each other,
side by side, like this.
1:18
So, in my style sheet I selected the class
article-content and applied a float left.
1:26
Now at this point, the article content
divs will appear below the floated images,
1:33
because their width, by default,
takes up 100% of their parent container.
1:38
So to position the article content
divs on the right side of each image,
1:44
I reduced the width of
article content to 78%.
1:49
And now both elements
are laid out side by side.
1:55
You could have also floated
article content right,
1:58
And this produces the same results.
2:05
Floating the images and divs collapse the
height of the parent article containers.
2:08
So to clear, or open up, the collapsed
space around the floated elements,
2:14
you could have used one of
several different approaches.
2:18
One way is setting the parent
articles overflow to auto.
2:21
Another way is creating
a pseudo element for
2:29
article that clears up
the collapsed space inside it.
2:32
Now, in a float based layout,
you may need to clear several containers.
2:42
So I like to create a reusable clear
fixed class I can use anywhere.
2:46
I included this group
class in the stylesheet.
2:51
So if you give each article
in the HTML the class group,
2:54
It will open up the collapsed
space around the floated elements.
3:03
Finally, to center the navigation
inside the header,
3:07
I selected the header element,
snd set text-align to center.
3:11
Now, this isn't going to center the nav
just set, because the nav is a block
3:18
level element that takes up
an entire line inside the header.
3:22
So then, I set nav's display
property to inline-block,
3:26
that way, it does not take up
a full line inside the header.
3:31
As a result, the center alignment applied
to the header centers the navigation.
3:35
So I hope you were able to complete
this practice session successfully.
3:40
If not, why not start over and
3:43
try to write the flow properties
without looking at my version.
3:44
I am also going to teach you more about
floats in CSS layout in other courses.
3:47
I'll see you soon and happy coding.
3:51