OK. So how do we bring that image on the right side? 1
We can't just drag it like we do in Figma. 2
We cannot align it to the right either. 3
Remember what I told you before? 4
If you're stuck and trying to figure out how to make things work in Webflow, 5
the clue is probably... another box. 6
Let's take a look at our layout. 7
We have a hero section. Inside 8
we have a container which holds all the content. In this container, 9
we have elements that we want to layout on the left, and an image that we want to layout on the right. 10
So we have to somehow split this container in 2 halves. Left half and right half. And have them sit 11
next to each other. 12
We can do that using Div Blocks. 13
We can put 2 Div Blocks inside this container and then put content accordingly. 14
Beware, Webflow will drop new all elements inside your selection. 15
After I added a new Div Blog, it selected that new one and second Div Blog was dropped inside of it. 16
Just drag it out from this navigator panel. 17
Now drag the image in one Div Block and everything else in the other Div Block. 18
And let's name these Div Blocks accordingly. Left and Right 19
There. Now the structure is on the right track. 20
Now we have to figure out how to make them sit next to each other, instead of on top of each other. 21
There are several ways we can do this, and one best way. 22
Let's go through each one. 23
First, the quickest way to do this is by using the float property. 24
We can find these under position section. 25
It's hidden inside a dropdown. Float is a CSS property that tells the element to position itself, either 26
on the left or right of other surrounding elements. 27
In our case, we want the image to position itself on the right. 28
So we set Float Right on our right block. And note here, I've set the float on the Right Block, not just 29
the image. 30
If you set Float only on the image, then this will happen. 31
This is floating image inside that Right Block. Not affecting the left block content, because the right 32
block is still sitting on top of the left block. 33
Even though this is a quick way, to make these elements sit next to each other. 34
It's not the best way. For example, if we shrink the browser, this happens. Instead of shrinking the content 35
we'd prefer if the image shrank. 36
There are ways to fix this even with float property, but we have better options. 37
There is one thing float does the best. Wrapping text content around the element. 38
If we have a section like this, and we want the text to wrap around the image, just like it would happen 39
in a text document, we can give the image Float style. And even add margins on the side, 40
so text wraps around neatly. These and couple other things are what float does the best. 41
Second option is by using columns. Webflow has this premade layout element for columns. 42
Inside Column Settings, we can choose many different arrangements and how many columns do we want to 43
use. 44
It's using the same 12-point grid layout, like we did in Figma and can be split different layout, 45
just like our grid, in twos, threes, fours and so on. Inside the navigator you can see how these columns 46
are arranged. We can drop left block in column 1 and right blocking column 2. 47
This is already improvement to the float because the content shrinks nicely. But here's the truth - I hate 48
columns. They're not as flexible as one might think and sometimes strange things happen to it. It looks powerful 49
and flexible, but so many times I've hit limitations with columns, that I stopped using them and started making 50
my own. This approach actually helped me understand web development better and improved my skills. I'd advice 51
to do the same. At the end of the day, these columns are made of Div Blocks, yet again. And have specific 52
CSS properties applied to them. So let's go with the best option. The best and most accepted way to arrange 53
this would be CSS feature called Flexbox. Which you can apply under Display Settings. Let's go through 54
each of these display settings and see how they behave. 55
By default, 56
most elements come with display settings set to Block. Block elements, they stretch from edge to edge. 57
And nothing can be placed next to them, they will push the next element to the second line. They will 58
do this even if we set a smaller width and there is space for other elements on that same line. Next 59
we have Inline block. Inline block elements are as wide as content inside, they free up leftover space, 60
which can be occupied by other elements. 61
Remember that behavior when we duplicated the button in a past lesson? 62
Buttons in Webflow by default are set to Inline Block. 63
They only occupy space of their content. 64
So, if you put 2 Inline Blocks together and there is space, they will sit next to each other. In here, 65
if we set display to Inline Block, 66
nothing happens. Because the content, in this case, is a free-flowing text, which will make the box as wide 67
as possible. 68
But if we delete some of this text, then we'll see that bounding box shrinks with it. 69
However on a block element, 1 below it, 70
that doesn't happen. Even if we delete the text, the bounding box still occupies the entire width of its 71
parent. 72
Now, I said that Inline Block elements frees up a space for other elements next to it. 73
So, how come the second paragraph didn't jump above? 74
Because second paragraph is set to block. And block elements are greedy and they want to occupy an entire 75
floor just for themselves. 76
But if we set the second paragraph to Inline Block as well, it still doesn't go up. Why? They want to, 77
but there is not enough space for both of them. 78
If we cut the text short on one of them, then there is going to be enough space, and the second block will 79
move to the floor above. 80
Also, this will happen if you manually shrink the width of one of them, by applying a fixed width. 81
Third display setting is Inline, no block. Inline is how text behaves inside any element. It flows just 82
like text, one next to each other. 83
It doesn't have width and size values, it will ignore them even if you put it. 84
There is not much use for Inline display outside of the text. 85
So that's Inline. 86
Then we have display None. Which hides the element. 87
It's not just invisible, but it also doesn't affect the layout. 88
It's not transparent. 89
We're just telling the browser to do not render it and completely ignore it. Although it doesn't disappear 90
completely from our website. 91
It's still in the navigation panel. 92
If it was transparent, it would still occupy the space. 93
You might wonder what use there might be for display None, 94
but there are many and we'll get to them. 95
That's display None. Then we have display Grid. One of the best things that has happened in web design 96
in recent years. 97
CSS grid does something that was not possible before. To have a table like arrangement, where you 98
can move elements as you like with a lot of flexibility. 99
With an ability to have a completely different layout between different devices. 100
We won't be going through ins and outs of a Grid right now, because we won't be needing it as much. 101
Instead, we'll be using Flex layout which we will cover in the next video. 102
So to recap this lesson. We have several different options to make elements sit next to each other. 103
We have Float, one of the oldest and simplest methods. Float can make an element sit either on the 104
left or right of the content. And surrounding elements 105
will sort of wrap around it. Then we have columns, which you know...I hate. 106
End of lesson. I would advice to use it moderately and mainly if you want to save some time. 107
And finally, we went through all the display settings from Block to the CSS Grid and we will cover those 108
individual Display Settings, once we need them.