HTML Element Style How to - Pull out quotation








Question

We would like to know how to pull out quotation.

Answer


<html>
<head>
<style>
body {<!-- www. j  a  va2  s. co  m-->
  margin: 10px;
  width: 514px;
}

p {
  border: 2px solid #000000;
  padding: 5px;
  margin: 5px;
}

.pullQuote {
  float: right;
  width: 150px;
}
</style>
</head>

<body>
  <h1>Floating</h1>

  <p class="pullQuote">Here is the pullquote. It will be removed from
    normal flow and appear on the right of the page.</p>

  <p>This is where the story starts and it will appear at the top of
    the page under the heading. You can think of it as the first paragraph
    of an article or story. In this example, the pull quote gets moved
    across to the right of the page. There will be another paragraph
    underneath.</p>

  <p>Here is another paragraph. This one will be at the bottom of the
    page.</p>
</body>
</html>

The code above is rendered as follows: