1
00:00:00,170 --> 00:00:04,460
In this video, I am going to display
columns side by side, in medium and

2
00:00:04,460 --> 00:00:06,630
large screens using floats.

3
00:00:06,630 --> 00:00:11,680
In my style sheet I'll go inside the media
query, and I'm going to float the columns

4
00:00:11,680 --> 00:00:16,150
left by grouping the call class
with the name selector here.

5
00:00:16,150 --> 00:00:22,920
So right after the name class I'll add
a comma and then add the class col.

6
00:00:22,920 --> 00:00:27,200
So now both the name and
columns will float left.

7
00:00:27,200 --> 00:00:32,100
And at this break point I wanna
display only two columns side by side.

8
00:00:32,100 --> 00:00:37,990
If I place all three columns on the same
line when the screen is 769 pixel wide,

9
00:00:37,990 --> 00:00:40,690
the columns will appear
too narrow on the screen,

10
00:00:40,690 --> 00:00:43,090
making the content difficult to read.

11
00:00:43,090 --> 00:00:46,040
So in this break point,
I'm only going to give the primary and

12
00:00:46,040 --> 00:00:48,370
secondary columns a width.

13
00:00:48,370 --> 00:00:53,712
So right below the name and
col rule, I'll create a new

14
00:00:53,712 --> 00:00:58,838
rule that targets primary and
the class secondary.

15
00:01:01,378 --> 00:01:05,080
Then I'm going to set their width to 50%.

16
00:01:05,080 --> 00:01:08,160
I'm not giving the tertiary
column a width yet.

17
00:01:08,160 --> 00:01:12,590
That column will appear below the primary
and secondary columns in this break point.

18
00:01:12,590 --> 00:01:17,680
So the tertiary column's width
remains that base width of 100% and

19
00:01:17,680 --> 00:01:20,210
we'll see that in
the browser in just a few.

20
00:01:20,210 --> 00:01:26,690
Next, right below the top media query
I'm going to define a second media

21
00:01:26,690 --> 00:01:32,050
query to write the column and container
styles for a wider three column layout.

22
00:01:32,050 --> 00:01:37,590
So I'll create a new media
query by typing @media.

23
00:01:37,590 --> 00:01:44,410
And this break point will be
at a min-width of 1025 pixels.

24
00:01:46,590 --> 00:01:51,390
So when the view port or
device is 1025 pixels or wider.

25
00:01:51,390 --> 00:01:54,620
The styles written here will
be applied to the layout.

26
00:01:54,620 --> 00:01:57,970
In this new media query,
I'll create a new rule

27
00:01:57,970 --> 00:02:02,750
that targets container and
then I'll set its width to 80%.

28
00:02:02,750 --> 00:02:07,674
So it's a little narrower
than the 90% width given to

29
00:02:07,674 --> 00:02:11,040
container in the 769 breakpoint.

30
00:02:13,470 --> 00:02:18,110
Right below the width declaration
I'm going to define a max

31
00:02:19,630 --> 00:02:21,310
width of 1150 pixels so

32
00:02:21,310 --> 00:02:26,280
that the layout doesn't get too wide
when the screen is 1025 pixels or wider.

33
00:02:26,280 --> 00:02:30,880
So in this break point all three columns
will be laid out side by side on the same

34
00:02:30,880 --> 00:02:36,620
line and I want the primary column to be
slightly wider than the secondary and

35
00:02:36,620 --> 00:02:38,180
tertiary columns.

36
00:02:38,180 --> 00:02:44,836
So I'm going to target the primary
column and give it a width of 40%.

37
00:02:47,503 --> 00:02:53,212
Then right below, I'll target
the secondary and tertiary columns.

38
00:02:58,045 --> 00:03:00,840
And I'm going to set
their width value to 30%.

39
00:03:00,840 --> 00:03:07,880
So the primary column is 40% while
secondary and tertiary are 30%.

40
00:03:07,880 --> 00:03:11,050
So together that adds up
to a total width of 100%.

41
00:03:11,050 --> 00:03:15,810
So the float inside

42
00:03:15,810 --> 00:03:21,420
the main header and column containers
cause the container's height to collapse.

43
00:03:21,420 --> 00:03:25,530
And we know this because the layout and
the header and columns, looks broken.

44
00:03:25,530 --> 00:03:28,650
So we no longer see the main
header background and

45
00:03:28,650 --> 00:03:33,110
the footer content is actually
wrapping around the right column.

46
00:03:33,110 --> 00:03:36,620
And the footer is also displaying
near the middle of the page.

47
00:03:36,620 --> 00:03:38,400
Fortunately you know the fix for this.

48
00:03:38,400 --> 00:03:42,880
So the CSS already has a clear fix rule.

49
00:03:42,880 --> 00:03:45,530
So back in index.html

50
00:03:45,530 --> 00:03:49,890
I’m going to apply the clearfix
class to the collapsing containers.

51
00:03:49,890 --> 00:03:54,830
First I will add the clearfix class
to the container inside main-header.

52
00:03:54,830 --> 00:03:59,060
So right after the container class,
I’ll type clearfix.

53
00:03:59,060 --> 00:04:04,520
Then I’ll scroll down to the column
container and add the class clearfix.

54
00:04:07,260 --> 00:04:09,910
And now the header and columns look great.

55
00:04:09,910 --> 00:04:10,610
So that's it.

56
00:04:10,610 --> 00:04:13,046
My best city guide layout is complete.

57
00:04:22,879 --> 00:04:24,740
Great work so far.

58
00:04:24,740 --> 00:04:28,090
Up next, you'll learn how to place
elements, like navigation menus and

59
00:04:28,090 --> 00:04:32,530
icons anywhere on the page, using
relative, absolute, and fixed positioning.