AtoZ CSS Screencast: The CSS Value of Auto

This screencast is a part of our AtoZ CSS Series. View the entire series here.

Transcript

Auto is a CSS value that has a number of uses.

It’s the default value for a lot of box-model properties like width, height, margin, and background-size.

.box {
  width: auto;
  height: auto;
  margin: auto;
  background-size: auto auto;
}

It’s also the default value for position properties like top and bottom, left and right and z-index.

.box {
  position: relative|absolute|fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
}

There’s other more obscure places that auto can be used as well, like overflow, cursor, table-layout and the column-width property of CSS columns.

.box {
  overflow: auto;
  cursor: auto;
  table-layout: auto;
  column-width: auto;
}

Broadly speaking, the value of auto is automatically computed by the user-agent and the specific effect depends on the content and context that it’s used in.

Let’s look at an example…

.box {
  width: auto;
  height: auto;
}

Width / Height

With the default value of auto applied to the width and height of a <div> containing some dummy text, the dimensions of the box are automatically calculated and the box fills the width of the page and is as high as necessary to contain all the content.

It’s worth noting that width and height auto do not need to be declared but have been added here to illustrate the point.

Under these circumstances, when the window is resized, the available width for the <div> is reduced and its dimensions are automatically re-calculated to accommodate the content.

This is the default behaviour of any block level element and we’ll take a closer look at this in “Episode 4: display“.

Margin

While auto is the default value in many cases, sometimes we want to use it specifically to achieve a certain effect.

A very common design pattern on the web is to center a block of content, and often the whole website above a certain width. This can be achieved by setting a max-width on a wrapper element and setting margin:auto on the left and right hand side.

When we use margin-left:auto, the browser adds as much margin to the left hand side as there is space for – and the box moves to the right until its right-most edge aligns with its containing element. When we do the same on the right hand side, the same happens in the opposite direction and the box moves as far back to the left as it can go.

.box {
  max-width: 50%;
  margin: 0 auto;
}

Because there are now equal margins on each side, the box remains centered on the page.

It’s a shame this trick doesn’t work with vertical centering but we’ll be tackling this in a later video.

Width 100%

A <div> with width:auto expands to full the width of its parent, but there’s and important distinction between width:auto and width:100%.

If we have a <div> with width and height auto and some padding on the inside, the width is automatically calculated and takes the padding into account.

If we change width:auto to width:100% the box breaks out of it’s container and everything looks broken. This is because width:100% sets the width of our <div> to 100% of the width of it’s parent – and then the padding is added additionally.

This makes the width of our <div> 100% + 50px + 50px which is wider than the viewport.

A workaround is to either use auto or the box-sizing: border-box model where padding and border are added within the width of the box. The next episode is all about the CSS Box Model so be sure to check that out for more info. Sometimes using box-sizing isn’t an option, so this is a handy tool to have in the box.

Position

Another place where auto can come to the rescue is when using CSS positioning.

Imagine a situation with an element positioned in the top left corner of a box. Let’s say that at a certain width, we want the same element to be in the bottom right corner instead.

I’ve changed the background color to show that the media query does get fired, but it seems that setting bottom or right:0 will have no effect.

This is because top and left take precedence over bottom and right.

To make this work, we first have to remove the effect of top and left by setting them to auto.

.box {
  position: absolute;
  left: auto;
  right: 0;
}

Now everything works as expected.

Watch out for our Quick Tip article coming soon!