Instructor: 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 side, 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 and these
so all of these here in another box,
so that you can then put them side by side
just like we have it here.
Alright?
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 40pixels 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 240pixels,
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 is 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, ofcourse.
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.
Now 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.
Now, 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, right?
And so what we can do is to take a look at this element,
so 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 floats
with some elements placing itself where you don't
want it to be then you can
simply clear the floats like this,
now another solution would've been to
wrap these two elements here
inside of another container element,
and then we could have added the clear fix class
to that container.
So that clear fix 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 ofcourse, these three boxes,
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.
Alright,
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 280pixels
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
it doesn't seem to be somewhere here.
Yeah actually we set that height and width right here,
so that's why I couldn't see it,
but yeah! 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 40pixels 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 parenthesis, divide by two,
and so the result is 243.5pixels.
So let's not use the point,
and let's just use 443pixels.
So
with
243pixels
so divided 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.
Alright, so that looks nice already,
now we just need to add those 40pixels
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 like 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 edit the padding to all the sites
and so therefore it is now all too small,
so I just wanted a padding top of 20pixels,
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 flex box, Okay?
So flex box will be so helpful,
it's going to 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 10pixels 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 20pixels like we did here in this other one.
Actually here I think we used padding
but margin is better, ofcourse.
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 clear fix 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 diff with the class
of container,
and then we need to close it
right at the very end before this button.
Alright!
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 H two
and then there is the container.
But now you see that this container has a height of zero,
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 it's height collapsed
Okay
and if for some reason we really needed to fix that
then we could use a clear fix class for that.
So again, this does not need to be called clear fix
but this is just a general name that is used.
So content is nothing,
display is block,
and ofcourse,
finally
clear is set to both
and let's wait for it.
Ofcourse we also need to edit here to this element,
clear fix,
and
yeah
so now that turned red
which means that the container is back to having a height.
Okay, 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 said 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 flex box 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.