HTML and CSS Reference
In-Depth Information
<style type=”text/css” media=”screen”>
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
8
.bottom { clear: both; }
</style>
</head>
<body>
<p class=”right”>
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content.
</p>
<p class=”main”>
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
<p class=”bottom”>
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
</body>
</html>
As you can see from the style sheet, I've set the
float
property for elements with the
class “right” to
right
. I've also added some padding, a margin, and a border to that class
for aesthetic purposes and set the width for that class to 33% so that it isn't as wide as
the browser window. I've also put the second paragraph on the page in the class
bottom
,
and I've added the
clear: both
property to it. Figure 8.13 shows the results.
