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.