How to have 2 div tags of different sizes in the same row html css flexbox

Hi there, in this video we are going to make Div Tags that are different sizes. We've done kind of evenly spaced things, nice and easy, but in this case I want this one to be like 2/3, and this to be 1/3 of this top main part of my website. It might not look this pretty, our versions kind of look like this, it's the same principle, 2/3, 1/3, using Flexbox, and display flicks. 

To get started we need to add two boxes. This box here, that's going to have my H1, the P-tag, and this button in it, and this other box over here, to have the image in it, so there's going to be like two big boxes here. So let's put them into our HTML. Where are they going to go? They're going to go inside Main. Put a 'Return' in, and I'm going to put in-- What am I going to call them? I could call them Sections, I'm just going to call them Div Tags. Sections, articles, I get confused with. 

This one's going to be a Div of Hero Box1. Often this kind of area-- let's put that in first, often this kind of area, the main Masthead, can be called a Hero Box, or the Hero Image, or the main kind of Lead Image. Hero, gets used a bit, I use it a bit. So we're going to have two boxes. We're going to have that one, copy it, paste it, so we've got two, and I give them different names because we want them to be different sizes. Nice. Let's separate these out a little bit, just so that--

I say I'm doing it for you, but really it's for me. I'm a visual person doing code. So in the Hero Box I want to add a couple of things, I want to add an H1, and I want to add, maybe Lorem, maybe four words for the Heading. I'm going to add a P-tag, and that P-tag is going to have maybe 30 words. Awesome. Save it, let's check it in the browser, there we go. So I want to do the same for the next box. I'm going to grab that, steal it, and just put the same stuff inside Hero Box2. Those are my two boxes that have got the exact same content, they've got names.

A couple of things we need to do, first up we need to kind of basically do what we did in the last video, is get them stacking next to each other. They'll only stack next to each other if they have a width. So we need to say, you guys have a width, so let's do that first. So we'll do one called Hero Box1. I'm going to give this a width of, let's say, 50%. It sounds like a good number because it's half. We'll do the same with the second box, this one's going to be Hero Box2. We'll give them both different background colors. Background color. This one is going to be-- we're going to get rid of these colors but, corn flake, flower blue, nice, this one's going to be background color. This one's going to be random color, next one, mint cream. Let's check him up. 

Make sure they're all working, yep, so they've got a width, they don't stack next to each other, so how do we do that first of all? We're not worried about the height at the moment, because there's text and it's kind of keeping these boxes open. If you're doing it without this H1 and P-tags, put some content in there, or give them some heights. So stacking them next to each other, do you remember? Pop quiz; ready, steady, what did you do? Pause it. Go give it a try, stacking it next to each other. That's right, the Parent needs to be called Display Flex. So in this case the Parent is Main, so Main, we'll say Display, and we'll say Flex, please. That's what we need to do. All the children, which is these two fellas will go in. All right, stack next to each other. 

The other thing to know about Flexbox is that, what it wants to do is kind of, you know, before, they were really short, so they only came to the bottom of the text, now they've filled the whole space provided. That's like a feature of Flexbox, you can turn that off. I'm not going to cover it right now, but you can go to your shortcut sheet and you can make it, so that they just line up at the bottom of the text, it's up to you. Works fine for me like this. So what I want to do is, this guy here, remember, this guy takes over about 2/3, and this is about 1/3, it was easy with these guys, because Flexbox will stack them kind of next to each other. I want them to be separated out. I could use percentages, there's nothing wrong with doing that, I could make, Flexbox1, 70%, and this one here, 30, that would work, but I want to show you how Flexbox does it, it's another method of doing it. 

You'll see it loads online, so you need to know how to do it, especially when we start using, later on in the course when we do Bootstrap, and some other things, other frameworks, they'll use this method. It's what they'll say is, I want to be Flex of, so it's flex, colon, 'flex:', and you decide how big you want this one to be. I want it to be 2, and I want this one to be a Flex of 1. It's kind of a ratio, just I want you to take up, two parts, and this one, one part. Let's save it, let's check it. Don't forget the semicolons, Dan. Let's have a little look, there you go. 

This is two parts, that is one part. Now I don't need Gutters at the moment on this one. I've got colors here now, but we're going to get rid of them. I'm happy for this to kind of butt up right next to it, and we'll add some padding to the inside to get the text to pop back. So to recap, if you want irregular shapes you can either give it-- later on, we're doing-- you could use pixels. Pixels are bad because when we try to resize for a tablet, which we'll get into in the next project, it's better to use percentages, or use this option where it says Flex, because Flex, one or the other, it doesn't matter. I just want to show you both methods, because Flex is awesome, and you'll see it loads online, or on other people's websites, or websites you inherit. It's up to you which way you want to work. 

The way it works is, this Flex will only work if the parent has Display Flex turned on. It kind of raises a question, like why don't it, like grab the body, and say, actually I want the whole body to become Flex, just put it on Flex and then everything will work. The reason you don't want to do that, there's a couple of reasons, one is that it won't work. What ends up happening is, the Parent has to be the direct parent. Can't be the grandparent, on this parent-child thing, I've got a bit far away but, you have to be, like, see this Hero Box here? Display Flex has to be on this fella. It can't be on the container, which is outside the body, these are all nested inside of each other. Has to be the direct descendant. Sorry, you get the idea, right? 

So it won't work, also Flex does stuff, messes things up. Let's say I want to right align everything. I could use Display Flex on the body, and say, everybody, right align, but then everything is right aligned, the whole site. So in this case we get to be very specific. We get to say, just the Main, just do this one thing. In our case, like the last one was space between the cards, that's why. I asked that question, that's why I'm telling you the answer. You might go, like let's just turn it on for the whole thing; you can't. All right, that is it for having irregular sizes in HTML.