POSITION ABSOLUTE RELATIVE

"So now we're going to move on to our second example of parent and child. And I've alluded to this before and this is where we have columns. So let us go and grab a layout that we've prepared earlier. So what I'll do is just grab this one here, hold shift and drop it onto the page and I'll put it into business mode. Okay, so here you can see our columns. So the scenario here is what happens if someone's got more text in this than over here? Will the bottom line up, will it be equal height columns or will it have equal height columns?

So this is a name in CSS, in CSS an actual code in front end markup, we call it equal height columns. So mobile, you can add this here, this feature. So let's see how it works in actual code. And the mobile system works in exactly the same way. So what we'll do in here, we'll actually clone this image and I will paste in some text. Okay, did I say image? Clone this text and we'll add in some text again. Again, so I'll clone this text here and I'll just show you another trick here. If I paste over this, so look, I've got it all highlighted and paste that exact same piece of text. Look what happens. It preserves the style when I highlight all. So if I hit command or control and Z and now I just remove it, delete it, don't highlight it, okay, curses in and now press paste. It will be in the paragraph style. So again, learning something new there. So in this case I will make this piece of text smaller than this. So we've got three different heights.

So now what we're going to do is turn our equal heights' column on. So to do this we go to design mode and it's equal heights' column. It's a column so we're going to go to the columns frame, sky blue, click the pencil, it's a frame. So we go to frame, we're talking about height. So let's scroll down to height. Here we are and inside height we have equal height columns. Well, it's off. So now let's turn it on. Well look here and I turn it on. Hasn't worked. So troubleshooting, right? So now let me explain how code works. When we have equal height columns, this is now our parent, equal height columns is on, that's fantastic. But now we need to look at our child. So in the child here, what I'll do is just for this design, just for this exercise, I'm going to turn it to this one again so we can see our frames. So you can see here this is our frame with the inner padding. Now this frame, the inner padding has got height. You can see that these heights don't match.

So we need to say to the frame here, you need to be the full height. So what we need to do is this is literally what front end developers do in the diffs. We actually go here and we say, look, our maximum height notice, I can't put equal height columns here, not the parent. This is the child, cool. So in this one we can put it as full frame. So we have to do this in all the childs, okay? Now this maximum height isn't just a function of equal height columns, it's actually used for more things as well. That's why it is above here in the hierarchy. So now we've just learned that we've got a parent with equal height columns on and we've got our child that's telling it to be the full height of that frame of that diff. But there's a particular thing going on here now because this frame has got the padding, but if we look inside it, there's also our border where we've got this shadow. That's got a shadow all the way around here, which we put on in the intermediate class.

So in this case, this one also needs the full frame. Basically the rule of thumb here is ever in doubt just go to the child and put full frame on. That's literally it. But you do need to do it. This is the way that the front end works and we can't say go and predict if you want it on or off because quite often you don't. And I'll show you a scenario of that as well when you don't want equal height columns on. I'll do that just at the end. So now at this point I could go and preview, but we've also got this other height here. So at the moment we also need to tell this one to go to the bottom two, otherwise it's going to push this down and we're going to get a shadow and the white card isn't going to push down, so we have to put it on all of these properties too. So what I'm going to do is back to height, find our maximum height and just put it all to full frame.

So this is the biggest example you'd ever have to do it. Sometimes you only have to put the max height on. In the one instance, if you had no image in this case, then you would put it in the frame and in the card. In that first column, if we didn't have a card, you wouldn't need to put it in here at all. But in this case, this is the most complicated example you'll get and that's when we've got a card, we've got a shadow and we've got our inner padding. So unfortunately there you have to put it on nine times. So that's why this is a masterclass because I've shown you the most complicated thing. Now to make this even more of a troubleshooting exercise, we don't show full height in the editor and that's because it can make editing really difficult if you're using full height for other purposes. So we turn that off in the editor just like we turn off background video in the editor. So what I'm going to do now is save and view. Okay, so I'm just going to save and view this on the front.

And you can see here that we have equal height columns all lined up. So there you go. That's your second scenario. So arguably when you look at that, does it look as good? So equal height columns is an edge case of code. I don't expect you to use it a lot. That's why I've put this session in afterwards as the advance because arguably that doesn't look as good. Some people like to have them lined up for very specific reasons in their design. So you'll see that. Most of the time in all the 5,000 layouts that mobile has got, this is hardly ever on, okay. So that's just a little tip there for you so that you can see that in action. Now I will just say on the other scenario why you probably don't want that on, let's just look at masonry. So what I'm going to do here is clone out this here. Now just bear in mind we've got the full frame on here.

So what I might do is just going to show you if I move these blocks over to each of the two. So what we'll do here is we'll just put another wrap on there. And then what I'm going to do is take these and actually paste that one in there. So I'm holding shift, click paste, now I can remove this one and move this one down. And now I've got our other one which I'll move, okay. So I'm just going to hold shift and paste it in there and then I'll move this one down. So what we would have on here is a scenario where we're starting to build out a masonry. I could do the same over here. I could click the plus, clone this one, and then let's take that cloned and move it over here by just holding shift and placing it into that frame and clean as we go. So what we're starting to build out is that this kind of masonry look, which can look pretty cool, right?

So what would happen now if we've got equal height column on all of these, because we've just cloned this masonry, this masonry wouldn't need any equal height column on here. But what's going to happen at the bottom when we've got it on? So you really like edge case of code here. So what I'm going to do is just save this and let's go back and view this. So here, this isn't good. So it's basically, because we've got it on an all three, it's putting them on all three to the full height. So if that ever happens, quick fix. Well you've got to now go and take the full height out of all of these. So what you could just do, just as a little hack sheet, is go to your frame and turn off your equal height columns and then you've just got a bit of sanity there. So I'll just go back and view this one and now you can see our lovely masonry effect. Okay, so there you go. You've learned equal height columns."