1
00:00:01.02 --> 00:00:02.04
- Hi, this is Chris Converse.

2
00:00:02.04 --> 00:00:04.05
And in this episode we'll
use the calculation function

3
00:00:04.05 --> 00:00:07.00
of CSS in order to
dynamically change the width

4
00:00:07.00 --> 00:00:08.04
of one column in our layout,

5
00:00:08.04 --> 00:00:11.03
while the other column
remains at a fixed size.

6
00:00:11.03 --> 00:00:13.05
And will even allow for
spacing between our columns

7
00:00:13.05 --> 00:00:16.05
without having to resort to
using padding properties.

8
00:00:16.05 --> 00:00:17.06
So if you'd like to follow along with me,

9
00:00:17.06 --> 00:00:19.08
download the exercise
files and let's begin

10
00:00:19.08 --> 00:00:24.09
by opening index.html in a text editor.

11
00:00:24.09 --> 00:00:26.06
And once you have the html file open,

12
00:00:26.06 --> 00:00:29.02
you'll see that we have
a main element here.

13
00:00:29.02 --> 00:00:33.01
Inside we have an article
element and an aside element.

14
00:00:33.01 --> 00:00:34.05
And you can also preview this in a browser

15
00:00:34.05 --> 00:00:39.06
to see the layout we're starting with.

16
00:00:39.06 --> 00:00:40.07
And so to create our columns

17
00:00:40.07 --> 00:00:42.04
we'll go back to the exercise files.

18
00:00:42.04 --> 00:00:46.04
Let's open style.css
up in our text editor.

19
00:00:46.04 --> 00:00:48.00
Let's scroll down to the bottom,

20
00:00:48.00 --> 00:00:51.09
after our main with our pseudo element.

21
00:00:51.09 --> 00:00:53.01
Let's come down here a few lines

22
00:00:53.01 --> 00:00:55.08
and let's target the article.

23
00:00:55.08 --> 00:00:57.09
So type article, space.

24
00:00:57.09 --> 00:00:59.09
Put in our beginning and ending brackets.

25
00:00:59.09 --> 00:01:01.05
First thing we'll do is set a width here

26
00:01:01.05 --> 00:01:03.09
and then we'll set a float property.

27
00:01:03.09 --> 00:01:07.09
So set a width of 300 pixels.

28
00:01:07.09 --> 00:01:09.08
Semi-colon, space

29
00:01:09.08 --> 00:01:15.03
Then we're going to set
a float property to left.

30
00:01:15.03 --> 00:01:16.04
And if you preview this in a browser,

31
00:01:16.04 --> 00:01:18.04
you'll see that the aside
is now wrapping up next

32
00:01:18.04 --> 00:01:21.00
to the article element
with that float property.

33
00:01:21.00 --> 00:01:23.08
So now we're going to set a
float property on the aside.

34
00:01:23.08 --> 00:01:25.09
So let's go back into our CSS.

35
00:01:25.09 --> 00:01:28.05
Let's duplicate this role.

36
00:01:28.05 --> 00:01:32.01
Let's change article to aside.

37
00:01:32.01 --> 00:01:34.07
Let's change the width to 200 pixels

38
00:01:34.07 --> 00:01:42.00
and we're going to set the
float to right, instead of left.

39
00:01:42.00 --> 00:01:43.01
So with these properties in place,

40
00:01:43.01 --> 00:01:44.06
we'll now have our columns.

41
00:01:44.06 --> 00:01:46.04
However, if I resize
the browser you'll see

42
00:01:46.04 --> 00:01:48.05
that the columns are fixed, leaving a gap

43
00:01:48.05 --> 00:01:50.05
on larger screens and
stacking the elements

44
00:01:50.05 --> 00:01:53.09
on smaller screens even if
there's enough room to fit both.

45
00:01:53.09 --> 00:01:55.09
Now if we set both values to percentages,

46
00:01:55.09 --> 00:01:57.07
they'll both be resizing.

47
00:01:57.07 --> 00:02:00.00
So what we want to do is use
a calculation to set the width

48
00:02:00.00 --> 00:02:03.08
of the article and leave
the aside at 200 pixels.

49
00:02:03.08 --> 00:02:05.06
So to do this, back in our CSS file

50
00:02:05.06 --> 00:02:07.08
let's find the width property.

51
00:02:07.08 --> 00:02:10.00
Let's come in here and change
the value from 300 pixels

52
00:02:10.00 --> 00:02:15.00
to calc, C-A-L-C, beginning
and ending parenthesis,

53
00:02:15.00 --> 00:02:18.01
keep the semi-colon, and
then inside the parenthesis

54
00:02:18.01 --> 00:02:20.02
we're going to perform our calculation.

55
00:02:20.02 --> 00:02:22.07
So we'll start by setting 100 percent,

56
00:02:22.07 --> 00:02:24.04
so the article's width will be calculated

57
00:02:24.04 --> 00:02:27.08
from its parent container,
which is the main element.

58
00:02:27.08 --> 00:02:30.03
Then a space, then we're going to subtract

59
00:02:30.03 --> 00:02:33.07
the 200 pixel width of the aside.

60
00:02:33.07 --> 00:02:36.08
So 100 percent minus 200 pixels
is what we're calculating

61
00:02:36.08 --> 00:02:38.08
inside the parenthesis.

62
00:02:38.08 --> 00:02:40.07
And now back in the
browser you'll see that

63
00:02:40.07 --> 00:02:42.05
the article element is being resized

64
00:02:42.05 --> 00:02:45.08
and the aside element has a fixed width.

65
00:02:45.08 --> 00:02:48.00
And now to get a little more
space between our columns,

66
00:02:48.00 --> 00:02:50.03
we can simply subtract a few more pixels

67
00:02:50.03 --> 00:02:52.00
from the calculation.

68
00:02:52.00 --> 00:02:54.09
So to give us a 40 pixel
gap between the article

69
00:02:54.09 --> 00:02:57.00
and the aside, we'll come
back into the calculation

70
00:02:57.00 --> 00:03:04.00
for article, let's
change 200 to 240 pixels.

71
00:03:04.00 --> 00:03:05.05
And now back in the browser
we'll see that we'll always

72
00:03:05.05 --> 00:03:08.07
have a 40 pixel space
between the two columns

73
00:03:08.07 --> 00:03:12.03
regardless of the browser's width.

74
00:03:12.03 --> 00:03:13.09
And so now we have an
element in our layout

75
00:03:13.09 --> 00:03:16.03
in which the width is being
dynamically calculated.

76
00:03:16.03 --> 00:03:18.02
Allowing us to create
layouts without needing extra

77
00:03:18.02 --> 00:03:22.03
html, or using CSS margin
and padding properties.

78
00:03:22.03 --> 00:03:24.01
And so with that, I'll
conclude this episode.

79
00:03:24.01 --> 00:03:27.00
And as always, thanks for watching.