So one of the things you may have noticed
as you've been going through other code is that sometimes when you mess with
the height and the width of an element. You find out that it no longer is big
enough to hold all the text that you wanted to show. So, what can you do when
the content doesn't fit any longer inside the box that you've made
with your height and width. Well, you can use a property overflow to
determine how people are going to be able to access that content, or if they're even
going to be able to access it at all. The four values for overflow, include visible, which basically
means if you've drawn a box. And there's a whole bunch
of text inside of it, the text is actually
gonna go outside the box. So no matter what, the content is visible
even if it goes outside the lines. Hidden does pretty much the opposite. It says, [SOUND] if you have something
inside this box and it's too big, it's gone. You can't see it. Now this isn't a great idea,
because it's going to cause problems if the user increases the font
size on their browser. So if you've made some sort
of 600 by 800 pixel box, and you think,
oh this'll be great, no problem. Anyone will be able to read this. What's going to happen if someone
goes in and increases the font size? Your box doesn't get any bigger,
but the text does, so they might not be able to see the content. So a third option is to
give overflow scroll. And what this will do is it will
actually give a horizontal and vertical scrollbar to the element. Even if it's just a paragraph, all of
a sudden your paragraph has a scrollbar so people can see everything that's in it. The final value is auto, and
what it does is it says, oh, I'm only gonna add scrollbars as needed. Depending on how the person's
viewing the site right now. I'm going to go ahead and list some resources to show you some
examples of how overflow looks. But for right now, we're going
to go ahead and keep moving on. Because what I wanted to share with you
is this idea of other display values. Again browsers are always changing. HTML5 and
future versions are always changing and they're trying to add new support. The problem is when you see these new cool tools they don't always
work on every browser. So inline, inline block, block and
none will work everywhere. But here are a few more that are slowly
beginning to gain acceptance. And those are table, grid and flexbox. For grid and flexbox, I'm going to leave
it to you to kind of play with it. But I did want to show you an example of
where a lot of my students find the table display really helpful. How a table display works is that you
don't make an actual table with your HTML code, nor do you have the tag table. But you're telling your browser that you
wanna structure it as if it is a table. So, you would make any type of
containing element display:table. And then anything that you want
to line up in nice columns, you would use display:table-cell. So this sounds very confusing so I wanted to make sure I gave you
an example to go through with me. So I have here some code
that's basically just a div, a couple divs with some paragraphs in it. And what I wanted to do was I wanted
to make sure that they didn't have all the exact same content. As you can see, each of the divs is now
next to each other because we've told it we don't want them to be
underneath each other. But this really isn't what you
were hoping for it to look like. So let's go ahead and
try adding that float left. Save, I'm gonna go ahead over here and
refresh. And you can see,
it does look a little bit better. So, this is great because we wanted
everything to be next to each other. But what I'm gonna do now is I'm gonna
show you something that doesn't work out really well. And that is this idea of when I resize it. Now you can see this idea of that the
overflow might be really important because now things are going outside
the divs themselves. Plus, I really don't have any
type of margin between them. So let's go ahead and
add overflow, Hidden, or scroll, just to show you what I
was talking about there for a second. I'm gonna go ahead and refresh it. And now you can see that everything is
contained within the content box, and I can actually go in here and
I can scroll each and every one of these. I'm actually not a huge fan of this, because I don't like that people would
need to know that they can scroll. So we're going to try something new here,
instead what I'm going to do is set the width to 30%, and I'm going to
go ahead and use the inline-block. And let's take a look at
what this looks like now. I need to remember, I'm using a new
style sheet, so I need to go in and change my HTML so
I'm using that style sheet. The number of times when I was coming up
with these examples for you where I forgot to change the style sheet, or I forgot and
named it wrong was really embarrassing. So I'm hoping you'll avoid
those same problems I had. Over here I'm gonna refresh it. You can see this is not the look
that we are hoping for. It resizes, but it's just not doing
what we want because each one has its own particular height because we
really want it to just fit that. This is where table cell comes in. I'm gonna change my display from
inline block to table cell. And for once, when I go to hit refresh, I'm gonna actually know
why this doesn't work. But I wanna show you, when I hit
refresh it looks actually okay right here because it's made it so
that it all works out. Now depending on what browser you're on,
this may not work. Because what you really want to say is,
if I'm going to go ahead and make this used table cell, don't forget
to go into your body and say display. All right and I'm gonna refresh and
it's going to look the same, it's just going to be
a better coding style. Now, I'm going to try to put a lot
of examples of coding in here, in this CSS course, so
you can play with it. But, I can't stress enough that, sometimes
it's not going to work exactly the same for you, because you might be
using a different browser. You might be using the same browser,
but a different version. The most important thing is for
you to go in there, and keep trying these new values,
seeing what happens and playing with it. When it comes time for your final project,
that's when to be really specific about making sure that everything
looks good on every browser. The last thing I want to mention very
quickly was this idea of visibility. And it specifies whether or not
an element is going to be seen by a user. Now we talked about this earlier
when I talked about display none but what goes on visibility is you can
actually see that space was left for it. There's just nothing there. So when you use visibility,
the options are visible, hidden or collapsed if you're using tables. If you see this and you're wondering what
the difference is between display and visibility. Just remember that with displaying none the browser acts as if
it's not even there. You don't see anything. With visibility hidden, the browser
is going to leave the space that that element would take up,
it just doesn't show it. So finally, let's go ahead and review. Display is just one tool of
the many we're gonna use for positioning the elements on your page. Early design, deciding what you want your
page to look like before you start coding, is going to make things easier. Don't code thinking I want to use float
right design, and then decide oh, I'm gonna have to use float right here. Utilize all the different tools we have, such as inspect element,
to see your different options. And it's going to make your coding life so
much easier. We want to avoid save refresh,
save refresh. Instead, use those tools and you'll find that you're making really good
decisions in your design and your code. Thanks.