Example of using the CSS orientation media feature:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        border: 1px solid #666;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      p {
        font: 16px sans-serif;
        margin: 0;
        padding: .5em;
      }
      ul {
        font: 14px monospace;
        list-style: none;
        margin: 0;
        padding: .5em;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: #9289d6;
      }
      li {
        display: inline-block;
        margin: 0;
        padding: 0.5em;
        background: #fff;
      }
      @media screen and (orientation: portrait) {
        #example {
          width: 100%;
        }
      }
      @media screen and (orientation: landscape) {
        #example {
          position: fixed;
          width: 2.65em;
          height: 100%;
        }
        p {
          margin-left: 2em;
        }
        li + li {
          margin-top: .5em;
        }
      }
    </style>
  </head>
  <body>
    <ul id="example">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
        an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting, 
        remaining essentially unchanged.
    </p>
  </body>
</html>