kreitje/floats.html

## floats.html
<html>
 <head>
  <title>Float Example</title>

  <style type="text/css">
   /**
    * This CSS is only for the demo and doesn't affect floats
    **/
   div {
      border:1px solid #000;
      margin-top:10px;
   }
   div.noborder { border:0px;}

  </style>
 </head>
 <body>

   <p>You can use CSS on these elements instead of inline style attributes. I used inline examples so you don't have to keep refering back to the CSS at the top.</p>

   <!-- Two column layout -->
   <div style="width:49%;float:left;">
      This div covers the first 49% of the page on the left.
   </div>
   <div style="width:49%;float:right;">
      This div covers the first 49% of the page on the right.
   </div>

   <!--  Clears the floats so the next content starts on a new line -->
   <div style="clear:both;" class="noborder"> </div>

   <!-- Three column layout -->
   <div style="width:33%;float:left;">
      1st column
   </div>
   <div style="width:33%;float:left;">
      2nd column
   </div>
   <div style="width:33%;float:left;">
      3rd column
   </div>

   <!-- Dont forget to clear your float for a new line -->
   <div style="clear:both;" class="noborder"> </div>


   <!-- Two column layout -->
   <div style="width:20%;float:left;">
      This column has a sidebar only 20% wide
   </div>
   <div style="width:50%;float:left;">
      This div covers the next 50%; of the page. They don't have to equal 100%
   </div>

   <!-- Dont forget to clear your float for a new line -->
   <div style="clear:both;" class="noborder"> </div>
   <br />
   <div>
      <div style="float:right;width:200px;border:1px solid green;"> I am text on the right. By putting it first, the text wraps around me. I could be an image or really anything you want.</div>
      I am a paragraph of text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum, libero at semper congue, orci lacus tincidunt ante, a porttitor augue odio ac odio. Proin consectetur, urna sit amet elementum mollis, dui leo auctor justo, in dictum tellus metus quis eros. Mauris pharetra diam ut sem pulvinar dignissim. Quisque sit amet nunc at nisi dapibus pellentesque et et justo. Praesent a faucibus est. Aenean ligula leo, imperdiet eu tristique ac, pulvinar ut dui. Cras ornare cursus ornare. Nunc at tortor in ante adipiscing placerat.
      <br /><br />
      Sed bibendum lacinia dolor, non porttitor augue varius vitae. In in diam eros. Nullam quis ipsum massa, ut luctus nulla. Vestibulum id justo orci. Sed euismod, odio a tristique malesuada, risus ante laoreet sem, a viverra libero lectus vitae odio. Proin commodo condimentum odio id ullamcorper. Suspendisse convallis enim ac dui suscipit vitae bibendum neque varius. Sed tempor auctor ornare. Sed sed metus nunc. Aenean nec eros nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare tortor non tortor pretium sagittis sollicitudin odio imperdiet. Donec ut neque est. Vestibulum at justo nec nisl posuere laoreet. Vestibulum et neque elit. Aenean eget dui ac diam vulputate tincidunt et vitae mi.
   </div>

   <div>
      <div style="float:left;width:200px;border:1px solid green;"> I am text on the text. By putting it first, the text wraps around me. I could be an image or really anything you want.</div>
      I am a paragraph of text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum, libero at semper congue, orci lacus tincidunt ante, a porttitor augue odio ac odio. Proin consectetur, urna sit amet elementum mollis, dui leo auctor justo, in dictum tellus metus quis eros. Mauris pharetra diam ut sem pulvinar dignissim. Quisque sit amet nunc at nisi dapibus pellentesque et et justo. Praesent a faucibus est. Aenean ligula leo, imperdiet eu tristique ac, pulvinar ut dui. Cras ornare cursus ornare. Nunc at tortor in ante adipiscing placerat.
      <br /><br />
      Sed bibendum lacinia dolor, non porttitor augue varius vitae. In in diam eros. Nullam quis ipsum massa, ut luctus nulla. Vestibulum id justo orci. Sed euismod, odio a tristique malesuada, risus ante laoreet sem, a viverra libero lectus vitae odio. Proin commodo condimentum odio id ullamcorper. Suspendisse convallis enim ac dui suscipit vitae bibendum neque varius. Sed tempor auctor ornare. Sed sed metus nunc. Aenean nec eros nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare tortor non tortor pretium sagittis sollicitudin odio imperdiet. Donec ut neque est. Vestibulum at justo nec nisl posuere laoreet. Vestibulum et neque elit. Aenean eget dui ac diam vulputate tincidunt et vitae mi.
   </div>

 </body>
</html>
	<html>
	<head>
	<title>Float Example</title>

	<style type="text/css">
	/**
	* This CSS is only for the demo and doesn't affect floats
	**/
	div {
	border:1px solid #000;
	margin-top:10px;
	}
	div.noborder { border:0px;}

	</style>
	</head>
	<body>

	<p>You can use CSS on these elements instead of inline style attributes. I used inline examples so you don't have to keep refering back to the CSS at the top.</p>

	<!-- Two column layout -->
	<div style="width:49%;float:left;">
	This div covers the first 49% of the page on the left.
	</div>
	<div style="width:49%;float:right;">
	This div covers the first 49% of the page on the right.
	</div>

	<!-- Clears the floats so the next content starts on a new line -->
	<div style="clear:both;" class="noborder"> </div>

	<!-- Three column layout -->
	<div style="width:33%;float:left;">
	1st column
	</div>
	<div style="width:33%;float:left;">
	2nd column
	</div>
	<div style="width:33%;float:left;">
	3rd column
	</div>

	<!-- Dont forget to clear your float for a new line -->
	<div style="clear:both;" class="noborder"> </div>


	<!-- Two column layout -->
	<div style="width:20%;float:left;">
	This column has a sidebar only 20% wide
	</div>
	<div style="width:50%;float:left;">
	This div covers the next 50%; of the page. They don't have to equal 100%
	</div>

	<!-- Dont forget to clear your float for a new line -->
	<div style="clear:both;" class="noborder"> </div>
	<br />
	<div>
	<div style="float:right;width:200px;border:1px solid green;"> I am text on the right. By putting it first, the text wraps around me. I could be an image or really anything you want.</div>
	I am a paragraph of text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum, libero at semper congue, orci lacus tincidunt ante, a porttitor augue odio ac odio. Proin consectetur, urna sit amet elementum mollis, dui leo auctor justo, in dictum tellus metus quis eros. Mauris pharetra diam ut sem pulvinar dignissim. Quisque sit amet nunc at nisi dapibus pellentesque et et justo. Praesent a faucibus est. Aenean ligula leo, imperdiet eu tristique ac, pulvinar ut dui. Cras ornare cursus ornare. Nunc at tortor in ante adipiscing placerat.
	<br /><br />
	Sed bibendum lacinia dolor, non porttitor augue varius vitae. In in diam eros. Nullam quis ipsum massa, ut luctus nulla. Vestibulum id justo orci. Sed euismod, odio a tristique malesuada, risus ante laoreet sem, a viverra libero lectus vitae odio. Proin commodo condimentum odio id ullamcorper. Suspendisse convallis enim ac dui suscipit vitae bibendum neque varius. Sed tempor auctor ornare. Sed sed metus nunc. Aenean nec eros nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare tortor non tortor pretium sagittis sollicitudin odio imperdiet. Donec ut neque est. Vestibulum at justo nec nisl posuere laoreet. Vestibulum et neque elit. Aenean eget dui ac diam vulputate tincidunt et vitae mi.
	</div>

	<div>
	<div style="float:left;width:200px;border:1px solid green;"> I am text on the text. By putting it first, the text wraps around me. I could be an image or really anything you want.</div>
	I am a paragraph of text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum, libero at semper congue, orci lacus tincidunt ante, a porttitor augue odio ac odio. Proin consectetur, urna sit amet elementum mollis, dui leo auctor justo, in dictum tellus metus quis eros. Mauris pharetra diam ut sem pulvinar dignissim. Quisque sit amet nunc at nisi dapibus pellentesque et et justo. Praesent a faucibus est. Aenean ligula leo, imperdiet eu tristique ac, pulvinar ut dui. Cras ornare cursus ornare. Nunc at tortor in ante adipiscing placerat.
	<br /><br />
	Sed bibendum lacinia dolor, non porttitor augue varius vitae. In in diam eros. Nullam quis ipsum massa, ut luctus nulla. Vestibulum id justo orci. Sed euismod, odio a tristique malesuada, risus ante laoreet sem, a viverra libero lectus vitae odio. Proin commodo condimentum odio id ullamcorper. Suspendisse convallis enim ac dui suscipit vitae bibendum neque varius. Sed tempor auctor ornare. Sed sed metus nunc. Aenean nec eros nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare tortor non tortor pretium sagittis sollicitudin odio imperdiet. Donec ut neque est. Vestibulum at justo nec nisl posuere laoreet. Vestibulum et neque elit. Aenean eget dui ac diam vulputate tincidunt et vitae mi.
	</div>

	</body>
	</html>