1
00:00:08,921 --> 00:00:12,467
So one of the things you may have noticed
as you've been going through other

2
00:00:12,467 --> 00:00:16,254
code is that sometimes when you mess with
the height and the width of an element.

3
00:00:16,254 --> 00:00:20,084
You find out that it no longer is big
enough to hold all the text that you

4
00:00:20,084 --> 00:00:21,470
wanted to show.

5
00:00:21,470 --> 00:00:25,460
So, what can you do when
the content doesn't fit any longer

6
00:00:25,460 --> 00:00:28,290
inside the box that you've made
with your height and width.

7
00:00:28,290 --> 00:00:32,810
Well, you can use a property overflow to
determine how people are going to be able

8
00:00:32,810 --> 00:00:37,140
to access that content, or if they're even
going to be able to access it at all.

9
00:00:38,450 --> 00:00:40,220
The four values for overflow,

10
00:00:40,220 --> 00:00:44,160
include visible, which basically
means if you've drawn a box.

11
00:00:44,160 --> 00:00:45,930
And there's a whole bunch
of text inside of it,

12
00:00:45,930 --> 00:00:48,430
the text is actually
gonna go outside the box.

13
00:00:48,430 --> 00:00:53,610
So no matter what, the content is visible
even if it goes outside the lines.

14
00:00:53,610 --> 00:00:55,500
Hidden does pretty much the opposite.

15
00:00:55,500 --> 00:00:59,648
It says, [SOUND] if you have something
inside this box and it's too big,

16
00:00:59,648 --> 00:01:00,420
it's gone.

17
00:01:00,420 --> 00:01:02,300
You can't see it.

18
00:01:02,300 --> 00:01:06,270
Now this isn't a great idea,
because it's going to cause problems

19
00:01:06,270 --> 00:01:09,780
if the user increases the font
size on their browser.

20
00:01:09,780 --> 00:01:12,680
So if you've made some sort
of 600 by 800 pixel box,

21
00:01:12,680 --> 00:01:15,470
and you think,
oh this'll be great, no problem.

22
00:01:15,470 --> 00:01:17,140
Anyone will be able to read this.

23
00:01:17,140 --> 00:01:20,990
What's going to happen if someone
goes in and increases the font size?

24
00:01:20,990 --> 00:01:24,180
Your box doesn't get any bigger,
but the text does, so

25
00:01:24,180 --> 00:01:26,900
they might not be able to see the content.

26
00:01:26,900 --> 00:01:30,150
So a third option is to
give overflow scroll.

27
00:01:30,150 --> 00:01:32,920
And what this will do is it will
actually give a horizontal and

28
00:01:32,920 --> 00:01:35,070
vertical scrollbar to the element.

29
00:01:35,070 --> 00:01:38,960
Even if it's just a paragraph, all of
a sudden your paragraph has a scrollbar so

30
00:01:38,960 --> 00:01:41,004
people can see everything that's in it.

31
00:01:41,004 --> 00:01:44,636
The final value is auto, and
what it does is it says, oh,

32
00:01:44,636 --> 00:01:47,379
I'm only gonna add scrollbars as needed.

33
00:01:47,379 --> 00:01:50,790
Depending on how the person's
viewing the site right now.

34
00:01:50,790 --> 00:01:51,840
I'm going to go ahead and

35
00:01:51,840 --> 00:01:56,130
list some resources to show you some
examples of how overflow looks.

36
00:01:56,130 --> 00:01:58,920
But for right now, we're going
to go ahead and keep moving on.

37
00:02:00,530 --> 00:02:04,390
Because what I wanted to share with you
is this idea of other display values.

38
00:02:05,650 --> 00:02:07,210
Again browsers are always changing.

39
00:02:07,210 --> 00:02:10,090
HTML5 and
future versions are always changing and

40
00:02:10,090 --> 00:02:12,020
they're trying to add new support.

41
00:02:12,020 --> 00:02:14,510
The problem is when you see these new

42
00:02:14,510 --> 00:02:17,570
cool tools they don't always
work on every browser.

43
00:02:17,570 --> 00:02:21,960
So inline, inline block, block and
none will work everywhere.

44
00:02:21,960 --> 00:02:25,640
But here are a few more that are slowly
beginning to gain acceptance.

45
00:02:25,640 --> 00:02:29,212
And those are table, grid and flexbox.

46
00:02:29,212 --> 00:02:32,171
For grid and flexbox, I'm going to leave
it to you to kind of play with it.

47
00:02:32,171 --> 00:02:36,779
But I did want to show you an example of
where a lot of my students find the table

48
00:02:36,779 --> 00:02:38,370
display really helpful.

49
00:02:40,090 --> 00:02:44,280
How a table display works is that you
don't make an actual table with your

50
00:02:44,280 --> 00:02:47,100
HTML code, nor do you have the tag table.

51
00:02:47,100 --> 00:02:51,590
But you're telling your browser that you
wanna structure it as if it is a table.

52
00:02:51,590 --> 00:02:55,320
So, you would make any type of
containing element display:table.

53
00:02:55,320 --> 00:02:58,370
And then anything that you want
to line up in nice columns,

54
00:02:58,370 --> 00:03:00,920
you would use display:table-cell.

55
00:03:00,920 --> 00:03:02,980
So this sounds very confusing so

56
00:03:02,980 --> 00:03:05,610
I wanted to make sure I gave you
an example to go through with me.

57
00:03:07,260 --> 00:03:10,990
So I have here some code
that's basically just a div,

58
00:03:10,990 --> 00:03:12,620
a couple divs with some paragraphs in it.

59
00:03:12,620 --> 00:03:15,500
And what I wanted to do was I wanted
to make sure that they didn't have

60
00:03:15,500 --> 00:03:17,390
all the exact same content.

61
00:03:18,500 --> 00:03:22,620
As you can see, each of the divs is now
next to each other because we've told it

62
00:03:22,620 --> 00:03:24,640
we don't want them to be
underneath each other.

63
00:03:24,640 --> 00:03:27,336
But this really isn't what you
were hoping for it to look like.

64
00:03:27,336 --> 00:03:29,570
So let's go ahead and
try adding that float left.

65
00:03:37,838 --> 00:03:40,700
Save, I'm gonna go ahead over here and
refresh.

66
00:03:41,990 --> 00:03:44,587
And you can see,
it does look a little bit better.

67
00:03:44,587 --> 00:03:48,211
So, this is great because we wanted
everything to be next to each other.

68
00:03:48,211 --> 00:03:51,566
But what I'm gonna do now is I'm gonna
show you something that doesn't work out

69
00:03:51,566 --> 00:03:52,180
really well.

70
00:03:53,220 --> 00:03:57,320
And that is this idea of when I resize it.

71
00:03:57,320 --> 00:04:02,590
Now you can see this idea of that the
overflow might be really important because

72
00:04:02,590 --> 00:04:05,360
now things are going outside
the divs themselves.

73
00:04:05,360 --> 00:04:08,240
Plus, I really don't have any
type of margin between them.

74
00:04:08,240 --> 00:04:16,781
So let's go ahead and
add overflow, Hidden,

75
00:04:16,781 --> 00:04:21,680
or scroll, just to show you what I
was talking about there for a second.

76
00:04:22,780 --> 00:04:24,360
I'm gonna go ahead and refresh it.

77
00:04:24,360 --> 00:04:28,620
And now you can see that everything is
contained within the content box, and

78
00:04:28,620 --> 00:04:32,460
I can actually go in here and
I can scroll each and every one of these.

79
00:04:32,460 --> 00:04:34,280
I'm actually not a huge fan of this,

80
00:04:34,280 --> 00:04:38,320
because I don't like that people would
need to know that they can scroll.

81
00:04:38,320 --> 00:04:41,600
So we're going to try something new here,
instead what I'm going to do is set

82
00:04:41,600 --> 00:04:45,520
the width to 30%, and I'm going to
go ahead and use the inline-block.

83
00:04:45,520 --> 00:04:48,070
And let's take a look at
what this looks like now.

84
00:04:48,070 --> 00:04:51,920
I need to remember, I'm using a new
style sheet, so I need to go in and

85
00:04:51,920 --> 00:04:54,480
change my HTML so
I'm using that style sheet.

86
00:04:55,630 --> 00:04:59,360
The number of times when I was coming up
with these examples for you where I forgot

87
00:04:59,360 --> 00:05:03,370
to change the style sheet, or I forgot and
named it wrong was really embarrassing.

88
00:05:03,370 --> 00:05:06,340
So I'm hoping you'll avoid
those same problems I had.

89
00:05:06,340 --> 00:05:08,610
Over here I'm gonna refresh it.

90
00:05:08,610 --> 00:05:11,930
You can see this is not the look
that we are hoping for.

91
00:05:11,930 --> 00:05:16,080
It resizes, but it's just not doing
what we want because each one has its

92
00:05:16,080 --> 00:05:19,950
own particular height because we
really want it to just fit that.

93
00:05:19,950 --> 00:05:21,560
This is where table cell comes in.

94
00:05:21,560 --> 00:05:26,086
I'm gonna change my display from
inline block to table cell.

95
00:05:33,503 --> 00:05:35,293
And for once, when I go to hit refresh,

96
00:05:35,293 --> 00:05:37,630
I'm gonna actually know
why this doesn't work.

97
00:05:37,630 --> 00:05:41,280
But I wanna show you, when I hit
refresh it looks actually okay right

98
00:05:41,280 --> 00:05:44,530
here because it's made it so
that it all works out.

99
00:05:44,530 --> 00:05:47,921
Now depending on what browser you're on,
this may not work.

100
00:05:47,921 --> 00:05:51,587
Because what you really want to say is,
if I'm going to go ahead and

101
00:05:51,587 --> 00:05:55,921
make this used table cell, don't forget
to go into your body and say display.

102
00:06:00,504 --> 00:06:03,482
All right and I'm gonna refresh and
it's going to look the same,

103
00:06:03,482 --> 00:06:06,490
it's just going to be
a better coding style.

104
00:06:06,490 --> 00:06:10,260
Now, I'm going to try to put a lot
of examples of coding in here,

105
00:06:10,260 --> 00:06:12,390
in this CSS course, so
you can play with it.

106
00:06:12,390 --> 00:06:15,920
But, I can't stress enough that, sometimes
it's not going to work exactly the same

107
00:06:15,920 --> 00:06:18,370
for you, because you might be
using a different browser.

108
00:06:18,370 --> 00:06:21,350
You might be using the same browser,
but a different version.

109
00:06:21,350 --> 00:06:23,760
The most important thing is for
you to go in there,

110
00:06:23,760 --> 00:06:27,690
and keep trying these new values,
seeing what happens and playing with it.

111
00:06:27,690 --> 00:06:31,530
When it comes time for your final project,
that's when to be really specific

112
00:06:31,530 --> 00:06:34,570
about making sure that everything
looks good on every browser.

113
00:06:36,050 --> 00:06:39,930
The last thing I want to mention very
quickly was this idea of visibility.

114
00:06:39,930 --> 00:06:44,310
And it specifies whether or not
an element is going to be seen by a user.

115
00:06:44,310 --> 00:06:47,950
Now we talked about this earlier
when I talked about display none but

116
00:06:47,950 --> 00:06:53,280
what goes on visibility is you can
actually see that space was left for it.

117
00:06:53,280 --> 00:06:54,740
There's just nothing there.

118
00:06:54,740 --> 00:06:58,400
So when you use visibility,
the options are visible, hidden or

119
00:06:58,400 --> 00:07:00,650
collapsed if you're using tables.

120
00:07:00,650 --> 00:07:04,350
If you see this and you're wondering what
the difference is between display and

121
00:07:04,350 --> 00:07:05,400
visibility.

122
00:07:05,400 --> 00:07:07,910
Just remember that with displaying none

123
00:07:07,910 --> 00:07:10,080
the browser acts as if
it's not even there.

124
00:07:10,080 --> 00:07:11,670
You don't see anything.

125
00:07:11,670 --> 00:07:16,180
With visibility hidden, the browser
is going to leave the space that

126
00:07:16,180 --> 00:07:19,210
that element would take up,
it just doesn't show it.

127
00:07:19,210 --> 00:07:21,570
So finally, let's go ahead and review.

128
00:07:21,570 --> 00:07:24,610
Display is just one tool of
the many we're gonna use for

129
00:07:24,610 --> 00:07:27,490
positioning the elements on your page.

130
00:07:27,490 --> 00:07:31,980
Early design, deciding what you want your
page to look like before you start coding,

131
00:07:31,980 --> 00:07:33,790
is going to make things easier.

132
00:07:33,790 --> 00:07:38,600
Don't code thinking I want to use float
right design, and then decide oh,

133
00:07:38,600 --> 00:07:41,230
I'm gonna have to use float right here.

134
00:07:41,230 --> 00:07:43,200
Utilize all the different tools we have,

135
00:07:43,200 --> 00:07:46,250
such as inspect element,
to see your different options.

136
00:07:46,250 --> 00:07:48,760
And it's going to make your coding life so
much easier.

137
00:07:48,760 --> 00:07:51,630
We want to avoid save refresh,
save refresh.

138
00:07:51,630 --> 00:07:53,560
Instead, use those tools and

139
00:07:53,560 --> 00:07:57,190
you'll find that you're making really good
decisions in your design and your code.

140
00:07:57,190 --> 00:07:57,690
Thanks.