Float and Clear Control under CSS : clear « CSS

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<title>HTML/XHTML:  &raquo; Float and Clear Control under CSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />



<style type="text/css">



p.aligned-right { border-style: solid; border-width: 1px; height: 100px; width: 100px; background-color: yellow; float: right; }

.clearright { clear:right; }



</style>





</head>

<body>

<div class="content">

  <div>This is some dummy text.

  <p class="aligned-right">A floating region</p>

  Here is some more text.

  <br class="clearright" />

  This text should appear after the floating section.

  </div>

</div>

</body>

</html>

Float and Clear Control under CSS : clear « CSS « HTML / CSS