HTML and CSS Reference
In-Depth Information
element occupies the full width of its container minus whatever is needed for
the element's margins, borders, and the padding of the containing element.
Block elements also have a loat property: hey are allowed to loat alongside
other elements if there is suicient room. he loat property can take the values
left , right , or none , which is the default. left means that the element adheres
to the let margin of the containing element and that other HTML elements fol-
lowing the loated element wrap around it on the right. right does the opposite.
he element sticks to the right margin, and the HTML elements following it
wrap around to the let. Example 2.6 illustrates a common use of loating ele-
ments to create a page with a leading thumbnail image. he contents are from a
Wikipedia article on the America's Cup regatta.
Example 2.6: Flowing text around an image
<!DOCTYPE html>
<html>
<head>
<title>Example 2.6</title>
<style type="text/css">
body { padding: 2em; }
.image-left { float: left; padding-right: 1em; }
</style>
</head>
<body>
<div class="image-left">
<img src="images/Americas_Cup.jpg" alt="The America's Cup
trophy">
</div>
<p>
The America's Cup is a trophy awarded to the winner of the
America's Cup sailing regatta match. It is the oldest active
trophy in international sport, predating the Modern Olympics
by 45 years. Originally named the Royal Yacht Squadron Cup, it
became known as the "America's Cup" after the first yacht to
win the trophy, the schooner America. The trophy remained in
the hands of the New York Yacht Club (NYYC) from 1857 (when the
syndicate that won the Cup donated the trophy to the club) until
 
Search WWH ::




Custom Search