learn/rwd/float-based-rwd.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>A simple float-based responsive design</title>
    <style>
      body {
        font:
          1.2em Helvetica,
          Arial,
          sans-serif;
        margin: 20px;
        padding: 0;
        background-color: #eee;
      }
      .wrapper {
        max-width: 960px;
        margin: 2em auto;
      }

      .col1,
      .col2 {
        background-color: #fff;
      }

      @media screen and (min-width: 600px) {
        .col1 {
          width: 31.24999999%;
          float: left;
        }

        .col2 {
          width: 64.58333331%;
          float: right;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="col1">
        <p>
          This layout is responsive. See what happens if you make the browser
          window wider or narrow.
        </p>
      </div>
      <div class="col2">
        <p>
          One November night in the year 1782, so the story runs, two brothers
          sat over their winter fire in the little French town of Annonay,
          watching the grey smoke-wreaths from the hearth curl up the wide
          chimney. Their names were Stephen and Joseph Montgolfier, they were
          papermakers by trade, and were noted as possessing thoughtful minds
          and a deep interest in all scientific knowledge and new discovery.
        </p>
        <p>
          Before that night—a memorable night, as it was to prove—hundreds of
          millions of people had watched the rising smoke-wreaths of their fires
          without drawing any special inspiration from the fact.”
        </p>
      </div>
    </div>
  </body>
</html>