How to Create Nested Divs
Hi there. This video. We're going to talk about nesting. Div tags. All it means is we're going to end up doing this where we have our original yellow and pink box and we put other boxes inside of it, it's called nesting. It's not that fancy. You can see here boxes inside of boxes, they end up looking like this. In the end we're going to put text inside a box of position. Side of boxes. Yeah, let's do that. Now. I'll show you envious code. Let's go. All right. What we're doing is in your wire frames folder in your exercise files were looking to make this one here. Html div two. Okay. So same boxes. We'll use the same thing we've created so far. And we're gonna put two boxes inside a gray box and a purple box. Those are the heights. Let's work out how to do it. So India's code. Okay. We're going to do what's called nesting. Just means we're gonna put dibs inside of gives. Okay. So we have one div here and a second div here. Let's work on that first one, which is going to be our gray 100 ...
by 300. Okay. So where does it go? Depends on where you want it. I guess we've got this text in here. We don't really want anymore. That was just I guess I put that P techs in there to show you how we could highlight. And just so the box will have some content on it. Let's delete that for the moment just to make it nice and clean and clear. So what we're going to do is put a div tag just where that tag was. Okay. So if we go angle brackets Div Okay now we're not going to make a div then credit class up here and then come back and name it. We're going to do it all in one go. Okay. So instead of just closing it off here, now going to undo that I'm going to put in class before I finish it, then I'm going to call this one called box three. Okay then I'm going to close it off just to save some time. Okay? Rather than coming back and doing it later. I'm gonna put do I put anything in it? No, I'm just gonna leave it empty. But remember this is where it would go inside of that. Div let's leave it empty. Let's save it and it's not going to appear yet. Refresh, the text is gone and the dog tags in there but I can't see it. Okay, so we need to style it. We do not need this anymore. Okay, because I got rid of it And I'm going to call this one. box 3 curly braces and we're going to steal all of that. Okay. And we're gonna pick gray which is spelled both ways, wow, I get caught up with that every time gray look gray and gray. I don't know why I find that amazing. It's the same gray Davis about the different ways And and this one was a width of 100 and a height of 300. Here we go. Or 3000. That's not gonna work. Let's save it and let's check it out. Let's see if we made it work. Refresh. Look at that. So often when you're making a website, you'll make kind of like an overall website background, a big container and inside of that container you'll nest lots of different div tags, like the header and the navigation and the images and the carousel and all those things that is nesting. Let's do it with the second box. And I just want to show you a couple of things like if you don't get it in the right spot. So let's delete that P tag from here. Okay, that's where it should go. But let's say we do it just outside of here. Okay, so let's go, angle brackets. Div space class. Return. This one's gonna be called box four. Okay. Close it off with the angle bracket. Let's save at the top here. I'm going to copy and paste the whole thing. Real lazy. OK Box four. This one was purple. Is it purple purple? Purple and it was 1 20 by 3 50. So wow, it's actually 3 50 by 1 20. Height of 120. Let's give it a look and see in the browser awesome. Well not awesome. It's in the wrong place. Okay. So if you get it in the wrong place, it's really simple in the code to go actually you cut and you paste. Okay. I'm going to line it up so it looks nice and all the lined, let's save and now refresh it should be in there Awesome. Now if I want to say an H2 inside of that purple text. So here I could just put it here. There's nothing wrong with Typing H2. Closing it off and typing it in here heading to Okay. And that's perfectly grammatically and sin tactically dot that's a word correct. So let's give it a preview. It's in there. What ends up people, what ends up people doing what I like to do to make everything look nice is put returns in between all of this to really expose the nesting. So I know that there's a body tag inside of that is a box one inside of that is a box three. You can kind of see the indentation same with this box to and then inside of that is box four and inside of box four is H two. Does that make sense? All right. So we're getting the hang of this div tag division of space thing and putting boxes inside of boxes. Let's get on to the next video where we set our class project dumb dumb dumb homework time