HTML & CSS
Article
By Guy Routledge

AtoZ CSS Quick Tip: How to Use the CSS Auto Value

By Guy Routledge

This article is a part of our AtoZ CSS Series. Watch other screencasts in this series.
You can view the full transcript and screencast for auto here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the auto property for you.

The letter A in balloons

A is for auto

The auto CSS value is very useful in automatically adjusting your content to fit within your webpage. There is a multitude of uses for the value – you can use it to contain overflow content, as an alternative to clearfix, keeping images in proportion or even centering the content in the page. I’ll teach you through how to do this with these three easy tips.

Tip 1

The auto value is really useful when it is possible that content may flow outside of its containing element. Setting overflow: auto will add a scroll bar when required to keep the content within the containing element.

.content-box {
  width: 300px;
  height: 300px;
  border: 1px solid #cc3f85;
  overflow: auto;
}

See the Pen CSS A to Z: A — Overflow Tip 1 by SitePoint (@SitePoint) on CodePen.

Test the above CodePen snippet by removing the overflow property and watch what happens to the content that does not fit into the containing box.

Tip 2

overflow: auto can also be used as an alternative to clearfix. This creates a new block formatting context which contains the floats and prevents container collapse. In some cases this may be a better alternative to using overflow: hidden.

.container {
  width: 600px;
  border: 4px solid #9be22d;
  overflow: auto;
}

.blue-box {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #66d9ef;
}

.pink-box {
  float: right;
  width: 200px;
  height: 200px;
  background-color: #cc3f85;
}

See the Pen CSS A to Z: A — Overflow Tip 2 by SitePoint (@SitePoint) on CodePen.

Test the above CodePen snippet by removing the overflow property and watch how the containing element collapses.

Tip 3

The auto value can also be used to keep images in proportion.

If you need to resize an original image within a containing element, only explicitly set either the width or height (in relation to the containing element) and set the other element to auto. This will keep the image in proportion and avoid any distortion.

.image-holder {
  width: 50%;
  border: 1px solid;
}

img {
  width: 40%;
  height: auto;
}

See the Pen CSS A to Z: A — Overflow Tip 3 by SitePoint (@SitePoint) on CodePen.

Test the above CodePen snippet by resizing your window and watch how the image stays in proportion.

More:
  • phantasmate

    Hi, just to let you know this link doesn’t work on iPhone/Chrome: “Watch other screencasts in this series here”

    • Aleczander Gamboa

      Hi @phantasmate:disqus – thanks for letting us know! I’ve fixed the link and it should work now.

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.