Original subtitles

Now it's time for you to build

your own float layout in order to practice everything

that we have learned in this section so far.

And once again, in this section,

we will keep working on this shoe example here.

And so this is how we left it after the last challenge.

And so as always, please use that as a starting point.

And if you don't have the code, then just get it

from a link that I will place in this lecture.

Okay.

But anyway, after building our float layout here,

this is what our component is supposed to be looking like.

Now the very first thing that you should probably do

is to activate that box sizing trick,

so what we learned in the last lecture.

And then from there, you can start using floats.

For example, in order to place this free shipping label here

at the right site, so right beside this price here.

Then down here, as for these colors,

here, we actually don't need to use floats

because we already solved this problem before

in another challenge.

So we used inline blocks to place these colors here

all side by side, remember that?

And so there is no need to change that now.

And then finally, the biggest part of this challenge

is to create this layout where these three parts

are side by side.

So what I want you to do is to create one container,

which will contain this image,

then which will contain one element

which contains all of this, and then one element

which contains all of this.

So right now I think all of this content here

is simply one after another without any separation.

So without being in separate boxes, right?

Yeah. So that's the case.

But right now, what I need you to do

is to put these two here in one box.

So all of these here in another box,

so that you can then put them side by side,

just like we have it here.

All right.

So again, all of this here should be

in one container element.

And then as child elements, there should be this image.

Then a div, so a box which contains all of this.

And then another div, which contains these two.

Then between these elements here,

we have 40 pixels of space.

So here and here.

And then based on that, you will need to figure out

the width of both these elements here.

So this one and this one.

And if that sounds too hard or too confusing,

then don't worry.

You can just use a width of 240 pixels

and I will then explain you how I calculated the exact width

for each of the boxes.

Okay.

And I think that's it for the instructions

that you need for this challenge.

And maybe you can write them down to make it a bit easier

for you to follow them

because actually there's a lot to do here,

and so this really is a real challenge for you.

So once again, don't worry

if you are not able to complete it 100%.

All that matters is that you write at least

some of the code on your own and that you try it, okay?

So take all the time that you need,

and then just come back here to the video

to see my solution.

So how did you do?

Hopefully you did at least part of this challenge.

And so let's get started.

So as I said, the first thing I'm going to do

is to fix the box model by saying box-sizing,

border-box, of course.

And then let's start by working with these two elements here

to put them side by side.

So that's the price and the shipping.

So that's easy enough.

So float left.

So not keft obviously.

And then here,

float

right.

Okay.

So that doesn't look right somehow.

And so the reason for that is that now this image is bigger

and so it is floating around it as well.

So probably what we should do now already

is to put all the content here

inside that container that I mentioned.

So everything that comes after this image

should be in a new div, which I'm calling here

the product-info.

Okay, so we open that here

and then we want everything in there

until the end of the colors.

So here we close it.

And again, unfortunately,

CodePen does not automatically do the formatting for us,

but let's just leave it like this.

We don't need to worry too much about this small example.

So anyway, I will now put this other content,

so these two here, inside of another div

just as I told you to do in the instructions part.

And this one I'm calling the product-details.

Okay, and then close it right here after this ul

and before the button.

And so now each of them is in its own box.

So we fixed that problem,

that the image is no longer between these two pieces

of content, but we still have a problem,

which is that now this paragraph here is floating around,

or basically in between now these two pieces of content.

And so what we can do is to take a look at this element,

which is this one, the product-description,

and then clear the float right there.

So

where is that?

Let's see.

Well, I think I actually hadn't used this yet,

so let's paste it up here.

And let's say clear both.

And there you go. That fixes that floating problem, right?

So whenever you have a problem with float,

with some element placing itself

where you don't want it to be,

then you can simply clear the float like this.

Now, another solution would have been

to wrap these two elements here

inside of another container element,

and then we could have added the clearfix class

to that container.

So that clearfix hack that I showed you a bit earlier

that we will actually also need for something in a second.

But anyway, this is now done,

and so let's now worry about the overall layout here.

So the elements that participate in the layout

are, of course, these three boxes.

So this image, this box that we just created,

and this one, right?

So that's the image, that's the product-info.

So let's put that here right at the top

of the product information.

And then also the product-details.

And so let's put that here, close to the details.

Okay.

And so, as I was saying,

the first thing that we need to do

is to determine a width for these elements.

All right.

So let's do that.

And I will add a comment here

so that I can show you the math that is happening.

So the total width of this container is 825, right?

And it also has a border of four on each side.

So the math here is 280 pixels

minus eight, which are the two borders on each side,

then minus 250,

which is the width of this image.

So

where is that?

Let's see.

That doesn't seem to be somewhere here.

Ah, yeah. Actually we set that height and width right here.

So that's why I couldn't see it, but I knew it was 250.

So we need to subtract that as well from the total.

So that's not 280.

That's 825.

So don't know where that came from.

And then remember how I said

that we want 40 pixels right here and right here.

And so that is also space

that we cannot use for the columns.

So we need to subtract that as well. So minus 80.

So basically the result of this calculation here

will be the exact amount of space that we have remaining

to fill up with the columns.

So I will just do the math here using this functionality

on the Mac, but you can just do it any other way.

So 850 minus eight,

minus 250

minus 80.

So that is the total width that is available

for the two columns, but we have two of them.

And so we need to divide all of this by two.

So wrap it in parentheses, divide by two.

And so the result is 243.5 pixels.

So let's not use the point and let's just use 443 pixels.

So

width

243 pixels.

So divide it by two.

Then let's put the same on the other column here.

So that's this one.

Okay.

So that worked and now all we have to do

is to float all of these three elements.

So first, the image, which actually we haven't selected yet.

So let's give it a class

of

product image

and let's put that

somewhere here, maybe.

Well, actually not.

Let's put it actually outside here.

So the height and width, we don't need to define using CSS

because that's already in here,

but let us define the float

and float it to the left.

And now the same with all the other ones.

So float to the left.

And like this.

And let's copy this simply for the other one

and float left as well.

All right.

So that looks nice already.

Now we just need to add those 40 pixels

of spacing that we wanted, so let's use margin for that.

So I will just add a margin right on the image

and on this element right here.

So margin-right 40 pixels.

And then also on this one.

And with that, well, we are looking pretty close already

to our final layout, right?

Let's just add some cosmetic details here.

So adding some padding here to the top of this one.

So padding

40 pixels, let's say.

Well, that's a bit too much.

Okay.

And now I'm noticing that these colors

somehow no longer fit down here,

so let's see why that might be.

Well, maybe we need to decrease the space a little bit

between them, or actually I did a mistake here.

So added the padding to all the sides,

and so therefore is now all too small.

So I just wanted a padding top of 20 pixels.

Yeah. And now that looks a lot better of course.

Now next up, let's add some margin here

to this free shipping label.

So to kind of manually align it to this value here.

So margin top,

let's say eight pixels.

And by the way, all of these things,

like manually aligning elements like this,

will all be a thing of the past

once we start using Flexbox, okay?

So Flexbox will be so helpful. It's gonna be incredible.

We will not have to do any of these like guessing numbers

to align vertically.

We also will not have to do manual calculations

of width, like this.

So all of this will be automatically figured out by Flexbox

in the future.

So that's going to be so helpful.

And I can't wait to show it to you actually.

Now let's just add some space here to this paragraph.

So let's see if I have already selected that.

Yeah, here it is.

So let's say margin-bottom

of 10 pixels right there.

And then finally, let's fix the spacing here a little bit.

So here is a lot more spacing than here

and that's because we still have that margin-top

on the product details.

So let's fix that.

So on this product details title.

So this is the one I mean.

So let's get rid of that and let's instead add a margin

to the top of 20 pixels, like we did here in this other one.

Actually here, I think we used padding,

but margin is better of course.

So let's go back also to this other box

and,

yeah, so instead of padding, let's use margin here.

And so that looks the same.

And with this, we are actually finished.

So that looks just like this.

And so challenge completed successfully.

Now there are some things that we could

have done a bit differently.

So for example, I told you

that we would need the clearfix class,

but actually we ended up not needing it.

So what we could have done would have been

to wrap these three elements here into a container.

And actually that's what I told you to do, right?

So, well, why not then just do that?

So that's not too hard.

So let's do that here.

A div

with a class

of container.

And then we need to close it right at the very end

before this button.

All right.

So let's select that container here

to give it a background color.

Okay.

And now you see that the color

is actually nowhere to be seen.

So in order to figure out why that is, let's inspect this.

So we have the article and then in there is the h2

and then there is the container.

But now you see that this container has a height of 0.

So why do you think that is?

Well, once again, it's because of collapsed heights.

So this element technically has no height

because all of its child elements are floated, right?

So the child elements are these three.

So the image, it is the product-info

and the product-details.

And so remember how we floated all of these three elements.

And so that means that the container right now

has no element that is not floated.

And so therefore its height collapsed.

Okay, and if for some reason we really needed to fix that,

then we could use a clearfix class for that.

So again, this does not need to be called clearfix,

but this is just a general name that is used.

So content is nothing.

Display is block.

And of course finally clear

is set to both.

And let's wait for it.

Ah, of course, we also need to add it here to this element.

Clearfix.

And

yeah.

So now that turned red,

which means that the container is back to having a height.

Okay.

And let's comment that out here.

And so yeah, now that's really it.

But again, it actually also worked

without this container element

because we had all of the space here nicely divided up.

So we set exactly how wide each

of these elements here should be,

and so therefore there was no space

for any of the next element, in this case, the button,

to float around them.

Okay.

But again, I'm sure that sounds a bit confusing

and the reason for that is that I'm not going super deep

into how floats and clears actually work

because, for the rest of the course,

we will now replace them with Flexbox and CSS Grid,

which make all of this a lot, lot easier.

Trust me.

So if you're excited about that,

then don't wait and let's move right

to our next lecture here.