0
1
00:00:02,630 --> 00:00:05,250
OK. So how do we bring that image on the right side?
1

2
00:00:05,400 --> 00:00:07,570
We can't just drag it like we do in Figma.
2

3
00:00:07,650 --> 00:00:10,120
We cannot align it to the right either.
3

4
00:00:10,140 --> 00:00:11,640
Remember what I told you before?
4

5
00:00:11,640 --> 00:00:15,390
If you're stuck and trying to figure out how to make things work in Webflow,
5

6
00:00:15,540 --> 00:00:17,750
the clue is probably... another box.
6

7
00:00:17,760 --> 00:00:19,530
Let's take a look at our layout.
7

8
00:00:19,560 --> 00:00:21,280
We have a hero section. Inside
8

9
00:00:21,360 --> 00:00:25,350
we have a container which holds all the content. In this container,
9

10
00:00:25,350 --> 00:00:31,140
we have elements that we want to layout on the left, and an image that we want to layout on the right.
10

11
00:00:31,140 --> 00:00:37,710
So we have to somehow split this container in 2 halves. Left half and right half. And have them sit
11

12
00:00:37,710 --> 00:00:38,900
next to each other.
12

13
00:00:38,940 --> 00:00:40,990
We can do that using Div Blocks.
13

14
00:00:41,010 --> 00:00:45,480
We can put 2 Div Blocks inside this container and then put content accordingly.
14

15
00:00:51,340 --> 00:00:54,670
Beware, Webflow will drop new all elements inside your selection.
15

16
00:00:54,700 --> 00:01:00,190
After I added a new Div Blog, it selected that new one and second Div Blog was dropped inside of it.
16

17
00:01:00,190 --> 00:01:02,200
Just drag it out from this navigator panel.
17

18
00:01:02,290 --> 00:01:06,820
Now drag the image in one Div Block and everything else in the other Div Block.
18

19
00:01:20,250 --> 00:01:23,260
And let's name these Div Blocks accordingly. Left and Right
19

20
00:01:34,920 --> 00:01:37,620
There. Now the structure is on the right track.
20

21
00:01:37,650 --> 00:01:42,770
Now we have to figure out how to make them sit next to each other, instead of on top of each other.
21

22
00:01:42,780 --> 00:01:46,050
There are several ways we can do this, and one best way.
22

23
00:01:46,050 --> 00:01:49,660
Let's go through each one.
23

24
00:01:49,710 --> 00:01:53,100
First, the quickest way to do this is by using the float property.
24

25
00:01:53,100 --> 00:01:55,380
We can find these under position section.
25

26
00:01:55,380 --> 00:02:01,740
It's hidden inside a dropdown. Float is a CSS property that tells the element to position itself, either
26

27
00:02:01,740 --> 00:02:04,750
on the left or right of other surrounding elements.
27

28
00:02:04,800 --> 00:02:07,890
In our case, we want the image to position itself on the right.
28

29
00:02:07,890 --> 00:02:14,410
So we set Float Right on our right block. And note here, I've set the float on the Right Block, not just
29

30
00:02:14,410 --> 00:02:15,240
the image.
30

31
00:02:15,360 --> 00:02:19,130
If you set Float only on the image, then this will happen.
31

32
00:02:19,140 --> 00:02:24,780
This is floating image inside that Right Block. Not affecting the left block content, because the right
32

33
00:02:24,780 --> 00:02:27,090
block is still sitting on top of the left block.
33

34
00:02:30,720 --> 00:02:33,890
Even though this is a quick way, to make these elements sit next to each other.
34

35
00:02:33,900 --> 00:02:39,900
It's not the best way. For example, if we shrink the browser, this happens. Instead of shrinking the content
35

36
00:02:39,900 --> 00:02:42,040
we'd prefer if the image shrank.
36

37
00:02:42,060 --> 00:02:46,200
There are ways to fix this even with float property, but we have better options.
37

38
00:02:46,200 --> 00:02:50,950
There is one thing float does the best. Wrapping text content around the element.
38

39
00:02:51,240 --> 00:02:56,970
If we have a section like this, and we want the text to wrap around the image, just like it would happen
39

40
00:02:56,970 --> 00:03:02,490
in a text document, we can give the image Float style. And even add margins on the side,
40

41
00:03:02,490 --> 00:03:07,860
so text wraps around neatly. These and couple other things are what float does the best.
41

42
00:03:10,700 --> 00:03:15,680
Second option is by using columns. Webflow has this premade layout element for columns.
42

43
00:03:21,490 --> 00:03:26,800
Inside Column Settings, we can choose many different arrangements and how many columns do we want to
43

44
00:03:26,800 --> 00:03:27,520
use.
44

45
00:03:27,550 --> 00:03:32,620
It's using the same 12-point grid layout, like we did in Figma and can be split different layout,
45

46
00:03:32,620 --> 00:03:38,590
just like our grid, in twos, threes, fours and so on. Inside the navigator you can see how these columns
46

47
00:03:38,590 --> 00:03:45,110
are arranged. We can drop left block in column 1 and right blocking column 2.
47

48
00:03:56,100 --> 00:04:01,740
This is already improvement to the float because the content shrinks nicely. But here's the truth - I hate
48

49
00:04:01,740 --> 00:04:07,680
columns. They're not as flexible as one might think and sometimes strange things happen to it. It looks powerful
49

50
00:04:07,680 --> 00:04:12,960
and flexible, but so many times I've hit limitations with columns, that I stopped using them and started making
50

51
00:04:12,960 --> 00:04:18,420
my own. This approach actually helped me understand web development better and improved my skills. I'd advice
51

52
00:04:18,450 --> 00:04:23,340
to do the same. At the end of the day, these columns are made of Div Blocks, yet again. And have specific
52

53
00:04:23,350 --> 00:04:32,000
CSS properties applied to them. So let's go with the best option. The best and most accepted way to arrange
53

54
00:04:32,000 --> 00:04:40,480
this would be CSS feature called Flexbox. Which you can apply under Display Settings. Let's go through
54

55
00:04:40,480 --> 00:04:43,060
each of these display settings and see how they behave.
55

56
00:04:47,070 --> 00:04:47,750
By default,
56

57
00:04:47,760 --> 00:04:53,850
most elements come with display settings set to Block. Block elements, they stretch from edge to edge.
57

58
00:04:54,270 --> 00:05:00,540
And nothing can be placed next to them, they will push the next element to the second line. They will
58

59
00:05:00,540 --> 00:05:08,870
do this even if we set a smaller width and there is space for other elements on that same line. Next
59

60
00:05:08,870 --> 00:05:14,930
we have Inline block. Inline block elements are as wide as content inside, they free up leftover space,
60

61
00:05:14,930 --> 00:05:17,440
which can be occupied by other elements.
61

62
00:05:17,450 --> 00:05:21,470
Remember that behavior when we duplicated the button in a past lesson?
62

63
00:05:21,560 --> 00:05:24,630
Buttons in Webflow by default are set to Inline Block.
63

64
00:05:24,710 --> 00:05:27,440
They only occupy space of their content.
64

65
00:05:27,440 --> 00:05:32,980
So, if you put 2 Inline Blocks together and there is space, they will sit next to each other. In here,
65

66
00:05:32,990 --> 00:05:35,050
if we set display to Inline Block,
66

67
00:05:35,060 --> 00:05:41,000
nothing happens. Because the content, in this case, is a free-flowing text, which will make the box as wide
67

68
00:05:41,000 --> 00:05:41,960
as possible.
68

69
00:05:41,990 --> 00:05:46,490
But if we delete some of this text, then we'll see that bounding box shrinks with it.
69

70
00:05:49,700 --> 00:05:52,440
However on a block element, 1 below it,
70

71
00:05:52,550 --> 00:05:57,980
that doesn't happen. Even if we delete the text, the bounding box still occupies the entire width of its
71

72
00:05:57,980 --> 00:05:58,850
parent.
72

73
00:05:58,880 --> 00:06:03,470
Now, I said that Inline Block elements frees up a space for other elements next to it.
73

74
00:06:03,500 --> 00:06:06,470
So, how come the second paragraph didn't jump above?
74

75
00:06:06,680 --> 00:06:12,800
Because second paragraph is set to block. And block elements are greedy and they want to occupy an entire
75

76
00:06:12,800 --> 00:06:14,570
floor just for themselves.
76

77
00:06:14,780 --> 00:06:21,170
But if we set the second paragraph to Inline Block as well, it still doesn't go up. Why? They want to,
77

78
00:06:21,170 --> 00:06:23,660
but there is not enough space for both of them.
78

79
00:06:23,690 --> 00:06:28,520
If we cut the text short on one of them, then there is going to be enough space, and the second block will
79

80
00:06:28,520 --> 00:06:30,870
move to the floor above.
80

81
00:06:30,980 --> 00:06:35,960
Also, this will happen if you manually shrink the width of one of them, by applying a fixed width.
81

82
00:06:44,730 --> 00:06:52,650
Third display setting is Inline, no block. Inline is how text behaves inside any element. It flows just
82

83
00:06:52,650 --> 00:06:57,100
like text, one next to each other.
83

84
00:06:57,250 --> 00:07:01,660
It doesn't have width and size values, it will ignore them even if you put it.
84

85
00:07:04,940 --> 00:07:08,640
There is not much use for Inline display outside of the text.
85

86
00:07:08,670 --> 00:07:09,530
So that's Inline.
86

87
00:07:12,340 --> 00:07:16,990
Then we have display None. Which hides the element.
87

88
00:07:17,140 --> 00:07:20,140
It's not just invisible, but it also doesn't affect the layout.
88

89
00:07:20,140 --> 00:07:21,590
It's not transparent.
89

90
00:07:21,730 --> 00:07:27,340
We're just telling the browser to do not render it and completely ignore it. Although it doesn't disappear
90

91
00:07:27,370 --> 00:07:28,600
completely from our website.
91

92
00:07:28,600 --> 00:07:30,160
It's still in the navigation panel.
92

93
00:07:33,550 --> 00:07:36,190
If it was transparent, it would still occupy the space.
93

94
00:07:39,600 --> 00:07:42,380
You might wonder what use there might be for display None,
94

95
00:07:42,390 --> 00:07:44,940
but there are many and we'll get to them.
95

96
00:07:45,090 --> 00:07:52,320
That's display None. Then we have display Grid. One of the best things that has happened in web design
96

97
00:07:52,320 --> 00:07:53,880
in recent years.
97

98
00:07:53,880 --> 00:07:59,520
CSS grid does something that was not possible before. To have a table like arrangement, where you
98

99
00:07:59,520 --> 00:08:02,490
can move elements as you like with a lot of flexibility.
99

100
00:08:09,440 --> 00:08:13,660
With an ability to have a completely different layout between different devices.
100

101
00:08:13,670 --> 00:08:20,150
We won't be going through ins and outs of a Grid right now, because we won't be needing it as much.
101

102
00:08:20,150 --> 00:08:23,900
Instead, we'll be using Flex layout which we will cover in the next video.
102

103
00:08:24,470 --> 00:08:29,270
So to recap this lesson. We have several different options to make elements sit next to each other.
103

104
00:08:29,300 --> 00:08:34,190
We have Float, one of the oldest and simplest methods. Float can make an element sit either on the
104

105
00:08:34,190 --> 00:08:37,200
left or right of the content. And surrounding elements
105

106
00:08:37,200 --> 00:08:41,550
will sort of wrap around it. Then we have columns, which you know...I hate.
106

107
00:08:41,570 --> 00:08:46,420
End of lesson. I would advice to use it moderately and mainly if you want to save some time.
107

108
00:08:46,700 --> 00:08:52,610
And finally, we went through all the display settings from Block to the CSS Grid and we will cover those
108

109
00:08:52,610 --> 00:08:55,270
individual Display Settings, once we need them.