AtoZ CSS Quick Tip: Auto

This article is a part of our AtoZ CSS Series. Watch other screencasts in this series.

Welcome to our first article as part of our AtoZ CSS series! In this series we'll be exploring different CSS values (and properties) beginning with a letter from the alphabet. Let's start by looking at the letter A.

[caption id="attachment_138360" align="aligncenter" width="1024"] A is for auto[/caption]

A is for auto

The auto CSS value is very useful in automatically adjusting your content to fit within your webpage. There are 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.

[code language="css"]
.content-box {
width: 300px;
height: 300px;
border: 1px solid #cc3f85;
overflow: auto;
}
[/code]

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.

Continue reading %AtoZ CSS Quick Tip: Auto%

by Guy Routledge via SitePoint