After unexpected gaps in pages, perhaps the most common layout problem is content overflow. Thankfully, there are just a few common causes of this problem, and some well-established solutions:

Overflow Cause 1: A Container with a Set Height

The most common problem I see with my students is setting a height on container elements. For example:

<aside>
<p>Now, cryin wont help you, prayin wont do you no good,<br>
When the levee breaks, mama, you got to move.
</aside>

And in the CSS:

aside { 
    display: inline-block;
    border: 1px dotted #000;
    height: 10px;
}

Which produces:

The reason is fairly straightforward: by default, containers will automatically be the height of their content. By setting a default height on the element, you are subverting this rule. The other relevant rule is that browsers will always show content that overflows by default. Thus, you get the result shown in Figure 1.

Treatment:

There are several possible solutions:

1. Remove the height from the container’s CSS, and let the element find its own natural height from its content.
2. Remove the border (or background) from the element: no border, no visual overflow! *

Overflow Cause 2: A Too-Wide Image

An image placed on a web page will appear at its natural width: for a bitmap, this means the image’s horizontal pixel count; for an SVG, the value of its predefined height and width attributes. This causes overflow in any element that is too small to contain it, as shown in Figure 2.

Solution

The solution is almost always the same: provide a percentage width for the image in CSS:

img { width: 100%; }

This will make the image always fit its responsive parent.

Overflow Cause 3: A Container with Percentage Width

A problem that is increasingly common in the age of responsive design: an element containing text is given a percentage width:

aside {
    width: 20%;
}

This element will narrow with the viewport. Left untreated, longer words will eventually overflow the horizontal edge, as shown in Figure 3.

(Images in this scenario will be taken care of by the solutions provided for Cause 2)

Treatments

There are three possible solutions:

1. Place a min-width on the parent element, creating a lock at the lower viewport widths. However, that usually only takes you half-way.
2. Engage hyphenation in an @media query. This will only cure the problem for especially long text runs; eventually, you’ll need to go for option 3.
3. Change the layout to a vertical design, rather than side-by-side; I particularly like to use flexbox for this.

Overflow Cause 4: Not Using Border-Box

By default, width in CSS is not what most people assume it is: padding is added to the width of content to produce an overall width, often causing overflow issues.

Solution

Engage box-sizing: border-box for most or all elements by default. Doing this at the start of your site development is very important; otherwise, you’ll be building and measuring elements based on a series of incorrect assumptions, and will be forced to change them all later.

Overflow Cause 5: Floated Elements

Floated elements to not contribute to the height of their container. Taking the following as an example:

<div id="levee">
    <img src="chicago.jpg" alt="A photograph of the waterfront 
    of Chicago">
    <p>Thinkin bout me baby and my happy home<br>
    Going, gon to chicago,<br>
    Gon to chicago,<br>
    Sorry but I cant take you.<br>
    Going down, going down now, going down.
    
    <p>Photograph by 
    <a href="https://www.flickr.com/photos/snake_bill/13812951923/">
    Yulin Lu</a>, used under a Creative Coommons 
    Attribution-NonCommercial-NoDerivs 2.0 Generic license.
</div>

With this CSS:

#levee {
    border: 2px solid #333;
}
#levee img {
    float: left;
    width: 50%;
    margin: 2rem;
}

Produces what you see in Figure 4:

Treatment

There are many “clear floats” or “clearfix” solutions for this problem. The simplest solution is extremely effective, but also counter-intuitive: use overflow: hidden on the parent element. In practice, this does the opposite of what you might expect:

#levee {
    border: 2px solid #333;
    overflow: hidden;
}

Which fixes the problem completely.

* Naturally, if the border is an intrinsic part of the design, this isn’t an option, but it’s surprising the number of times that people stress about this when no border or background (and thus no visible overflow) would actually be a better choice).

Banner artwork by Kello Goeller, used with permission; photograph by Benjamin Norman.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.