Skip to content

Technique G146:Using liquid layout

About this Technique

This technique relates to:

This technique applies to all technologies.

Description

The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Liquid layouts define layout regions that both resize with text, and reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same. This is an effective way to create designs that present well on different devices and for users with different font size preferences.

The basic principles of liquid layouts are to:

  1. Define the size of layout regions using units that will cause the region to scale relative to text, so they enlarge or shrink as text is enlarged or shrunk;
  2. Position the layout regions as a row of adjacent floating boxes, which wrap to new rows as needed in much the same way as words in a paragraph wrap.

Complex liquid layouts may be achieved by nesting layout regions, thus creating localized liquid layouts within a larger liquid layout. Even simple liquid layouts require design finesse to achieve good-looking results at a wide range of text sizes, but well-designed liquid layouts can be the most effective page design.

Examples

Example 1: Simple liquid layout in HTML and CSS

The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of Basic Liquid Layout</title>
  <style>
  .column {
    border-left: 1px solid green;
    padding-left:1%;
    float: left;
    width: 32%;
  }

  .column:nth-of-type(1){
    border:0;
  }
	
  footer {
    border-top: 1px solid green;
    clear: both;
  }
  </style>
  </head>
  <body>
    <h1>WCAG Example</h1>
    <h2>Text in Three Columns</h2>
    <div class="column">
      <h3>Block 1</h3>
      <p>The objective of this technique is to be able to present content 
        without introducing horizontal scroll bars by using layout 
        techniques that adapt to the available horizontal space.</p>
    </div>
    <div class="column">
      <h3>Block 2</h3>
      <p>This is a very simple example of a page layout that adapts as the
	text size changes.</p>
    </div>
    <div class="column">
      <h3>Block 3</h3>
      <p>For techniques that support more complex page layouts, see the
	Resources listed below.</p>
    </div>
    <footer>
      <p>Footer text</p>
    </footer>
  </body>
</html>

Tests

Procedure

  1. Display content in a user agent.
  2. Increase text size to 200%.
  3. Check whether all content and functionality is available with no horizontal scrolling.

Expected Results

  • Check #3 is true.
Back to Top