HTML and CSS Reference
In-Depth Information
Figure 2.6: A page with a floating image
Let and right loating elements can be used together to create a two-
column page. Example 2.7 uses CSS classes named
loatleft
and
loatright
.
Example 2.7: using floating elements to create columns
<!DOCTYPE html>
<html>
<head>
<title>Example 2.7</title>
<style type="text/css">
<!-- styles for two columns -->
h2 { text-align: center; }
p { text-align: justify; padding: 2%;}
p.floatleft { float: left; width: 46%; }
p.floatright { float: right; width: 46%; }
</style>
</head>
<body>
<h2>
Points Of Interest
</h2>
<p class="floatleft">
Notable buildings in the district include
the Flatiron Building, one of the oldest of the original New York
skyscrapers, and just to east at One Madison Avenue is the Met Life
