Create quote with float: right : q « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. q

Create quote with float: right

   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div {
  width: 400px;
}

div,h1,p {
  border: 1px solid #000000;
  margin: 5px;
}

p#pullQuote {
  float: right;
  width: 100px;
}
</style>
</head>

<body>
<div id="page">
  <h1>Heading One</h1>
  <p id="pullQuote">a pull-quote.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque.
   Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel 
   malesuada lacus mauris eget dui. </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque.
   Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel 
   malesuada lacus mauris eget dui. Quisque condimentum volutpat sem. Nunc dictum.
   Morbi elit lacus, ultricies faucibus, adipiscing non, sollicitudin ut, arcu.
   Curabitur cursus odio eu felis. </p>
</div>
</body> 

</html>








Related examples in the same category

1.Inline quotation
2.q:before {content:open-quote;}
3.q:after {content:close-quote;}
4.q {quotes: '"' '"';}
5.quotes for quote
6.Using classes and CSS overrides to create an alternate pull quote
7.Creating pull quotes in CSS
8.Pull Quote with font, border top bottom
9.Quote with thick border
10.Center Callout
11.Right Floating Callout
12.'q' Example
13.'cite' provides a URL for reference information to a borrowed quotation