<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head xmlns:wcag="https://www.w3.org/WAI/GL/"><title>Using percentage values in CSS for container sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body xmlns:wcag="https://www.w3.org/WAI/GL/"><h1>Using percentage values in CSS for container sizes</h1><section class="meta"><p class="id">ID: C24</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section class="applicability"><h2>When to Use</h2>
      <p>Pages that use CSS.</p>
   </section><section class="description"><h2>Description</h2>
      <p>The objective of this technique is to enable users to increase the size of text without having to scroll horizontally to read that text. To use this technique, an author specifies the width of text containers using percent values. </p>
   </section><section class="examples"><h2>Examples</h2>
      <section class="example">
         <section class="description"><h2>Description</h2>
            <p>A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally. </p>
         </section>
      </section>
   </section><section class="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
         <ol>
            <li>Check that all container widths are specified as percentage values. </li>
            <li>Increase the text size to 200%. </li>
            <li>Check to make sure that horizontal scrolling is not required to read any line of text. </li>
            <li>Check that all text is still visible on the page. </li>
         </ol>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>Checks #1, #3, and #4 are true. </li>
         </ul>
      </section>
   </section><section class="related"><h2>Related Techniques</h2>
      
   </section></body></html>