Right And Left Floating

The content or images float left or right. You can put your image on the left, right, or both sides of the article. You can also divide your article into two or three horizontal segments using CSS float property.

The syntax of floating value including left, right, none, and it is applies to all elements.

Resources:

CSS Code

<style type="text/css">


 img.float_left {float:left; margin:0px; padding-right:10px;}
 img.float_right {float:right; margin:0px; padding-left:10px;}

</style>

HTML Code

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">


 img.float_left {float:left; margin:0px; padding-right:10px;}
 img.float_right {float:right; margin:0px; padding-left:10px;}

</style>
</head>

<body>
  <div>
    <img class="float_left" src="logo.jpeg" /> <img class="float_right" src="logo.jpeg" />

    <p style="text-indent: 10" align="justify">This paragraph contains some text. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
    ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout