CSS

How To Set Width With CSS

We’ve looked at how to set the height of an element with CSS, so naturally the next step is to look at how to set the width of your HTML elements using CSS.

It’s important to control the width of your HTML elements so you can be sure all of your content fits on the page and looks exactly how you want it to.

Just like it’s important for cats to control their width, otherwise they might not be able to fit through their cat flaps.

What is that supposed to mean?

Nothing.

I’m not fat. I’m fluffy.

I’m literally very fluffy!

The width of an element is controlled with the width property in CSS, which looks like this:

        width: 
      

Just like with other CSS properties, width is set with a value and a unit of measurement.

You can use pixels, percentages, view height and view width just like when setting the height of an element, but let’s go over each of these in turn and look at how they apply to width.

Pixels

You can set the width of an element based on a number of pixels. Remember, pixels are the smallest parts of your screen.

To do this, use the width property in CSS, set the number of pixels and then finish your code with ‘px’.

Don’t forget the semi-colon!

Aria’s right. The CSS statement should finish with ;

Not too wide to forget that, am I?

Let’s look at some examples.

          width: 100px;
        
          width: 200px;
        
          width: 330px;
        

Remember, setting the width with pixels means the size is fixed across different screens from laptops to tablets to phones.

Use the box below to control the width of the picture.

        width:px;
      

Percentages

Another option is to set the width of a HTML element based on the size of the box the element is in. This can be done by setting the width to a percentage value where 100% is equal to the full width of the container.

Can you set width to more than 100%?

You can but the element will be slightly bigger than the element it sits within.

This would be like a cat sitting in a box that’s too small for it.

I really feel like you’re talking about me again!

#Aria { width: too big; }

Below is a cat in a box in another box. Change the CSS code to see what different percentage values for width look like.

        width:%;
      

View Width

A common alternative is to base the width of your element based on the width of the screen it is being shown on. To do this, specify the width of your element using ‘vw’ (short for view width) in your CSS code, where 100vw is equal to the entire width of the screen.

For example, if you wanted an image to fill the screen you can use 100vw in your CSS.

One example is where you may want four equal sized pictures shown side-by-side across your page.

For this you could use 25vw for width so that each image is the same width and all four fit on the same page. In this example, we would use 25vw as the full width of the screen is 100vw and the number of images is 4; dividing 100 by 4 gives us 25. If there were five images, then we would divide 100vw by 5 instead to get 20vw.

Remember, screen sizes for phones and laptops are very different; phone screens are tall but laptop screens are wide. This may mean that elements with the same CSS will look very different between screens.

These examples use images that are wider than they are tall and the following code:

        width: 100vw;
      

Which means the image will be the full width of the screen it is being shown on.

These two examples use images tall images and the same code:

Try changing the CSS code below and seeing what different view width values look like.

        width:vw;
      

If you’re reading this on a computer or laptop, try changing the size of your browser window and seeing how the image size changes with the same CSS code. Notice how the image shrinks as the window gets narrower; this is because the width is based on the width of the browser window.

You can also use values more than 100 but be careful as some of the content will be hidden as it be beyond the edges of the screen.

Again, this is like when cat’s try and get in a box that is clearly too small for them.

Speaking of which, I think my box has shrunk. I need a new one.

Speaking of which, I think my box has shrunk. I need a new one.

Yes. And can you make sure the new one isn’t covered in hair?

That’s your hair!

Right, but I can’t clean it. No thumbs.

Sorry I don’t make the rules.

View Height

You may wish to set the width of an element in CSS based on the height of the screen. This is particularly common but is another option you can use.

But be careful, as some of your element may be hidden based on the shape of screen.

Let’s have a look at the examples below which use the following code:

        width: 100vh;
      

Notice how on the phone screen not all the image is shown and on a laptop screen there is unused space.

Use the box below to experiment with CSS by changing by changing the width property of the image shown.

Try using pixels, percentages, view height and view width to see how each one looks:

        #cat-photo {
        width:
        }
      

Auto

The final option covered here, which also applies to height too, is to let the browser decide the width of your element.

How do you know what your element will look like?

That is a great question.

The browser will decide based on other CSS properties that you have set or any other information it has.

For instance, let’s take this photo of Aria chilling in the garden.

Aria just chilling

The image is rectangular and is wider than it is tall. In fact, the picture is 33% wider than it is tall.

Another way to state this is to say that the photo has a 4:3 aspect ratio which means for every 4 pixels wide it is, it should be 3 pixels tall. So to maintain the image as it was intended, this ratio should always exist between the height and width.

This could be 400 pixels wide and 300 pixels tall or 1280 pixels wide and 960 pixels tall or any other mix as long as this 4:3 ratio, referred to as the aspect ratio, is still maintained.

So what has this got to do with letting the browser decide on your CSS?

Well, you might find it easier to set either the height or width in CSS and let the browser decide the other.

Let’s say you wanted this image to be 80% of the screen width. You could do that using this code:

        width: 80vw;
      

So what should you set the height to be in your CSS code?

You could set it to 60vw to maintain the same aspect ratio, but you would get the same result by using the following code:

        width: 80vw;
        height: auto;
      

By setting height to ‘auto’ you are letting the browser automatically decide the value based on the information is has.

That’s fine, but if I can set the height, why shouldn’t I?

Another great question.

One advantage of using ‘auto’ in your CSS is that you don't need set both the height and the width and so you can just focus on the property that is most important; the browser will take care of the rest.

Another advantage is that if you change the image you don’t need to change your CSS code. Let’s say you replace your image with another image, your new image may have the same aspect ratio, in which case there’s no changes needed.

But if it does have a different aspect ratio, then you need to change your CSS code too. In these cases, it is just easier to use ‘auto’ in which case the same CSS works for both photos.

All previous examples have had height set to auto. Edit the CSS below to change the height and width of the image.

Experiment with different values, different units and try using auto for either CSS property to see what effect it has.

        #outside-cat-photo {
        height:
        width:
        }
      

With all of these options, you should now be able to use CSS to set the size of your HTML elements to exactly what you need.