1
00:00:00,720 --> 00:00:06,000
We can control the width and height of an element using the width and height declarations for the purpose

2
00:00:06,000 --> 00:00:13,460
of this lesson will apply various width and height attributes to a div to see the effect to start open

3
00:00:13,460 --> 00:00:17,350
the H2 AML file in your Downloads folder corresponding to this lesson.

4
00:00:18,830 --> 00:00:25,750
The file contains a div in the body and one I.D. selector Div 1 which has been applied to the div.

5
00:00:26,490 --> 00:00:29,440
Let's preview this file in our web browser to see what it looks like.

6
00:00:39,070 --> 00:00:46,140
Here we can see the div is 100 percent width of the content area and 500 pixels in height with a blue

7
00:00:46,140 --> 00:00:47,370
background.

8
00:00:47,370 --> 00:00:49,890
If we scale the browser window up and down

9
00:00:53,830 --> 00:00:59,640
we can see that the div expands and contracts to suit the size of the content area.

10
00:00:59,730 --> 00:01:04,730
It is always 100 percent of the content areas with

11
00:01:10,970 --> 00:01:17,270
CSX allows different values to be attributed to the width and height declaration will begin with minimum

12
00:01:17,270 --> 00:01:24,740
width meanwhile with can be used to specify the minimum amount of with an element must be since the

13
00:01:24,740 --> 00:01:31,160
width is currently set to 100 percent of the content area it will automatically stretch and contract

14
00:01:31,160 --> 00:01:34,040
with the browser window as we saw previously.

15
00:01:34,460 --> 00:01:41,240
If we wanted to maintain a minimum fixed width of at least six hundred pixels we can apply the following

16
00:01:41,240 --> 00:01:41,930
declaration

17
00:01:47,710 --> 00:01:49,120
now after you've saved your file.

18
00:01:49,120 --> 00:01:51,630
Let's go ahead and refresh our browser

19
00:01:55,800 --> 00:01:58,270
and this time you'll see that when the browser window

20
00:02:01,360 --> 00:02:07,010
becomes smaller than six hundred pixels we get the horizontal scroll bars.

21
00:02:07,010 --> 00:02:14,090
This is because this div it's minimum with must be six hundred pixels it will not go below that value

22
00:02:19,830 --> 00:02:21,020
in addition to menu.

23
00:02:21,060 --> 00:02:27,820
We also have maximum width or max width so if we set the maximum with to eight hundred pixels

24
00:02:34,870 --> 00:02:37,170
I'll save the file and we refresh the browser

25
00:02:40,040 --> 00:02:43,880
you'll notice that the div now does not go beyond 800 pixels

26
00:02:47,100 --> 00:02:51,270
so we have a minimum width said it's six hundred and a maximum of eight hundred

27
00:02:58,900 --> 00:03:08,550
which can also be set to auto so let's go ahead and set the width declaration value to auto and this

28
00:03:08,550 --> 00:03:13,530
will make the width of the Element automatically size to its container.

29
00:03:13,530 --> 00:03:19,320
In this case the div is not nested in another div so it will expand to the full size of the browser's

30
00:03:19,320 --> 00:03:21,480
content area.

31
00:03:21,480 --> 00:03:26,460
Now we do have to remove the max with declaration in order for the auto declaration to work

32
00:03:31,020 --> 00:03:36,210
so once you've saved refresh your browser and you'll notice that it now scales to the full width of

33
00:03:36,210 --> 00:03:38,630
the content area automatically

34
00:03:41,230 --> 00:03:43,120
similar to min with Max with.

35
00:03:43,150 --> 00:03:50,100
We also have min height and max height these values can be stated in pixels or percentage just like

36
00:03:50,100 --> 00:03:54,000
the can with min with and Max with

37
00:03:57,370 --> 00:04:03,820
an important difference between the width in height declarations is that setting the height to 100 percent

38
00:04:03,970 --> 00:04:13,600
will not result in your div occupying 100 percent of your browser's content area so for example if we

39
00:04:13,600 --> 00:04:17,500
were to change the height here to 100 percent

40
00:04:20,420 --> 00:04:26,870
and refresh our content area so you refresh our browser you'll notice that the div disappears altogether

41
00:04:30,910 --> 00:04:39,800
in order to do this we need to use the V H unit that's available with recent versions of CSX VH which

42
00:04:39,800 --> 00:04:45,520
stands for viewport height ensures that the element stretches to the full height one hundred percent

43
00:04:46,270 --> 00:04:48,370
of any device's viewport

44
00:04:51,240 --> 00:05:04,440
so let's go ahead and change the height value to 100 VH save the file and when we refresh you can see

45
00:05:04,440 --> 00:05:09,270
that it is now 100 percent of the height and 100 percent of the width.