What is a min-height compared to height for a div tag

This video has two parts, the main part is learning what Min-height is, instead of height. Then we're going to do some, just some housekeeping, we're going to add some structure to our page. We'll add a container and float in the middle, Header and Main, and these cards down the bottom here. It's stuff you've done before, but we need to do it before we move on to the next video. So let's learn what Min-height is in code. 

First up we need something to give some height or Min-height to. So first of all let's create a Div called Container. Hit space or hit return on your keyboard, div class=container. We're going to leave-- I'll put a Return in just to separate it out. Over here let's style it, remember, full stop in front of it, and container, curly braces. And then we'll do, we'll give it a width first, we'll do a width of, we'll do the same as before, 1024 pixels. Don't forget the pixels, and don't forget the semicolon. Let's give it a background color. I'm going to pick anything. I'm not going to use the named ones, I'm going to do variations of green. So I'm going to start with, dark green, to start with. Make sure the semicolon goes on the end. Let's check it out, it's not going to be able to be visible, because we haven't given it a height yet, but let's just kick this into gear. 

Wake up, it's on my other screen, come over here, buddy. So we need to give it a height, and this is where Min-height comes in, because if we give it a regular height, and I say I want it to be, I'm just going to say 300 pixels because it makes my example a little easier. Let's have a look; hey. We ran into this problem before, if we start adding stuff to this, say I add a P-tag and I put in lots of content, got a lots of, got a big long article or a blog post, so I want to put in 500 words, which is not massive, right? Hit 'Save', jump into here now. You can see, it spills out, so instead of using a height, it's very simple, we just use a minimum height. 

So we're just saying, the minimum you can go is 300, but you can go any size bigger than that if the content needs it. So we'll save that, let's preview it here, there you go. So it says, be at 300 unless you need more, so it will go bigger. Whenever you're thinking height now, pretty much for everything, think Min-height, and I want to center it. Pause it here, type in the centering, remember, centering, I want you to pause it, see if you can do it, go. All right, you're back. Remember what it was? It was Margin Left. And what was it? It was Auto; you got it, nice work. And then Margin Right. Auto. Let's check it out, it's in the center. 

So we're going to throw in some other chunks now, let's look at the mock-up. It's in your files, under Exercise Files, Project2. There's one in there called, was it called Mock-up? Example. So we look at the Home Page first, you can open that up. I'm using the XD file just because it's interactive, but same thing. So we're going to have a container. We are going to have a Header at the top, we're going to have a Main section. Then we're going to add some cards. So the Main is going to be this Title, this text here, then separately we're going to do these three little guys here. That could be--

Some people refer to them as tiles or cards, we're going to refer to them as cards, but tiles, it doesn't matter. Little boxes, you call them what you want. Just put those in, we'll discuss this later on in the course. So let's throw in those bits. I'm going to my wrapping back on, toggle Word Wrap, which, I was clicking the wrong one, it was clicked over here, so it's Word wrapping on CSS, which is separate. Now it does it here. And I want to get rid of that giant bit of, P-tag, which is there as an example. 

So what do we need? We need a Header. Predefined one, lovely. What else do we need? We need a main part, Main. Then we need, do we even have a Footer on this one? There's no Footer, you don't have to have a Footer. I didn't design this one with one, so we've not got one. What I'd like to do is put in three cards. So it's going to be outside of this Main just because. I wanted it to kind of not be part of this Main content, I want it to be on all pages, there you go. So it's on this other page as a separate little box. So we're going to, there's no such thing as a predefined-- like the container, there's no name for cards, we have to give it. We're saying, call it cards, plural, put a Return in, and, not going to do this, we'll do the separate three little cards in a second, just going to do like a box that they're all going to go into. 

So we're going to design, like a wrapper tag that goes around all of these guys, so Main, this one here, and then we're going to put the little individual bits inside. Same with the Header, we've made this kind of like big chunky Header the top, inside of it, it's going to go to the Logo, inside of it is going to be these little tags, sorry, little buttons. So we got cards, let's style cards. So we've got a container, we've got Header. Going to have a background color, of what? We're going to put in versions of that green. So background color, it's going to go lighter and lighter as I go along. I'm going to put in a min-height. 

Now, can you see this? It's not working, it's not pre filling it out. If yours ever starts doing that, it's because we've forgotten to close out that property at the top there. Now if we start typing, she's back, this one's going to be 100 pixels until I want to redo it, now we're going to check it before we go to further along. What did I do? I didn't hit 'Save All', there they are there. So I've got a container, which is the dark green, there's a Header in it there. Let's have a little look. Now the colors are here just for your kind of viewing pleasure, So you can see where the things are, let's style the Main. Let's cheat. 

This one here is going to be even lighter. Nice. this one here has a height of 300. And we do the same thing for the cards. Getting really lazy now; awesome. This one's called dot cards, '.cards'. This one here is going to be even lighter again. Save it, let's see what we got. So there's a container hiding at the background, it's kind of covered now. Then there's a Header, then there's a Main, and then there's my cards, and the cards are too big, are they? We might have to change that in a sec, that's all right. 

So that gives us our kind of basic structure in. Next video we're going to look at adding our cards in, and kind of working with something called Flexbox. All right, I'll see you there.