p float:right; : p layout « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p layout

p 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 type='text/css'>
/* CSS Document */

div {width:400px;}

div, h1, p {
  font-family:arial, verdana, sans-serif;
  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">Here is a pull-quote with a summary of the article.</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.Set width for a paragraph
2.p min-width: 500px;
3.p width:40em;
4.p width: 245px;
5.Set width and height for paragraph
6.p line-height: 1em;
7.Set line height of a Paragraph in content section
8.p max-height: 50px;
9.p line-height: 3em;
10.p height: 245px;
11.p line-height: 2.0;
12.Paragraph with different line-height
13.This paragraph is floated left
14.p float:left;
15.p float: left;
16.P display: block;
17.p display:none;
18.p overflow: visible;
19.p overflow: auto;
20.p overflow: scroll;
21.p overflow: hidden;
22.p white-space: nowrap;
23.p white-space: pre;