The first thing to know about defining the dimensions of elements on a web page is that you can use different kinds of units. There’s actually quite a lot of different standard units available, but they mostly fall into two categories: relative units, which allow an element to be fluid and change its size, and absolute units, which fix an element to a specific size no matter what. 

You’ll almost always want to use pixels (or px) to specify absolute dimensions. For relative dimensions, you’ll almost always use percentages for the width of an element, or “viewport height” (vh) for its height. Using relative dimensions is very important because it allows your design to naturally adjust to different screens and devices, which is the basis of what we call “responsive web design.” 

An important thing to remember is that width and height are not treated exactly the same way on the web. Different units are available for each, and their default behavior is a bit different.

Let’s start with width. To set the width of an element in your design, you can drag its edges on the stage, or use the Dimensions Panel to enter specific values. This panel lets you specify both a width, and a max-width. 

The width is the exact width of the element. If you set this to an absolute amount, which would usually be in pixels, then the element will always remain that width. Most often, though, it’s better to use a relative amount (a percentage) for an element’s width, so that it can change in size along with the browser window without ever forcing a horizontal scrollbar to appear. 

When the width is set to a percentage, you can also use the max-width to set an upper limit on how wide an element can get. This can be very useful for keeping text readable. 

As we mentioned, height works a bit differently than width. Content on the web wants to automatically flow vertically down the page. Because users may have different screen sizes, and because browser windows can be resized, elements on a web page naturally want to let their height increase and decrease as they get “squeezed.” This allows them to accommodate the content they contain, without ever cropping it. 

Specifying the height for an element in TIME Sites— let’s say, a text box — will define its minimum height. As soon as the content within the element exceeds this height, the element will automatically be forced to become taller. This is a good thing, because it prevents the content from getting cut off. 

By default, pixels are used to specify height. However, you can also use relative units, by entering “vh” (which stands for “viewport height.”) This will set the height of the element to be a proportion of the browser window’s current height. For example, you might want to ensure that a hero element always takes up 90% of the vertical space on the page, in which case you’d set its height to “90vh.” 

Keep in mind that even when using relative units, the height of the element may be forced to automatically increase if its content is taller than the value you’ve defined.

There may be some situations where you really need the height of an element to be truly fixed, and you don’t want it to adjust to accommodate its content. There is a way to do this, but it requires a few extra steps, and you’ll need to use the Positioning Panel as well as the Dimensions Panel. So you might want to be familiar with how positioning settings work before you try this.

First, the element that you want to have a fixed height must be the child of a parent element. For example, if you were trying to fix the height of a text element, you’d need to put it inside of a parent container first.

Select the parent element, then use the Dimensions Panel to define its height, and check the option for “Hide Overflow.” This option will force any child elements to get “cropped” if they overflow the height of the parent.

However, this setting only works on child elements that are absolutely positioned. So, select the child (in this case, the text element) and then, using the Positioning Panel, change its position from “Normal” to “Fixed to Parent.” Now any text that extends beyond the height of the parent will get cropped, instead of forcing the container’s height to increase. 

There’s a little fold-out drawer in the Dimensions Panel that gives you a few more options for specifying element dimensions. You can use these tools to modify the height or width of an element by a specific amount.

So for example, if I wanted to set a container to a relative width, so that it flexes with the browser — BUT, I also want to ensure that there’s always a fixed amount of 200 pixels of empty space beside it, I could use this panel to give it width:100% minus 200px.