Floating Positioning : float and position : Layout Attributes HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout Attributes » float and position »

Floating Positioning


 
<?xml version="1.0" ?>
<!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" xml:lang="en">

<head>
  <title>Floating Positioning</title>
  <style rel="stylesheet" type="text/css">

body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  margin: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

p {
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
  padding: 5px;
  background-color: #FFFFFF;
  width: 500px;
}

.pullQuote {
  float: right;
  border-style: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
  width: 150px;
}
</style>
</head>

<body>
<h1>Floating</h1>
<p><span class="pullQuote">the page.</span>
This will be at the top of the page. </p>
<p>Here is paragraph.</p>
</body>
</html>