Image floating with text

      
<!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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">

body {
 font-family: Arial, Helvetica, sans-serif;
 color: #666666;
 font-size: 12px;
 padding: 0; margin: 0;
 background: #eef1ed;
}
#wrapper {
 width: 770px;
 margin: 0 auto;
 border: 1px solid #eef1ed;
 background: url(images/forest.jpg) repeat-x bottom;
}
/* Begin Parent Left Column --------------------------------------------------------------------- */
#leftcolumn { 
 padding: 10px;
 display: inline; /* IE Fix */
 float: left;
 border-left: 1px dashed #ccc;
 border-right: 1px dashed #ccc;
 border-bottom: 1px dashed #ccc;
 border-right: 1px dashed #ccc;
 background-color: #fff;
}
#leftcolumn .logo {
 margin: 0px 0px 10px 0px;
 width: 180px;
 border: 1px dashed #ccc;
 background-color: #EEF1ED;
}
#leftcolumn .logo img { display: block; }
#leftcolumn .leftbox2 { /* Generic Box */
 margin: 0px 0px 10px 0px;
 border-top: 1px dashed #ccc;
}
/* Begin Left Navigation */
#leftcolumn ul.mainnav { 
 margin: 0px;
 padding: 0;
 list-style: none;
}
#leftcolumn ul.mainnav .heading {
 background-color: #9FAF9A;
 padding: 5px;
 color: #fff;
 font-size: 16px;
}
#leftcolumn ul.mainnav li { 
 border-bottom: 1px dashed #ccc;
 border-right: 1px dashed #ccc;
 border-left: 1px dashed #ccc;
}
#leftcolumn ul.mainnav li a:link, #leftcolumn ul.mainnav li a:visited{ 
 color: #333;
 background-color: #F9F9F9;
 text-decoration: none;
 padding: 5px;
 display: block;
}
#leftcolumn ul.mainnav li a:hover{ 
 display: block;
 background-color: #EEF1ED;
 text-decoration: none;
 padding: 5px;
}
/* End Left Navigation */
/* End Parent Left Column ----------------------------------------------------------------------- */


/* Begin Parent Right Column ----------------------------------------------------------------------- */
#rightcolumn {
 border-left: 1px dashed #ccc;
 border-right: 1px dashed #ccc;
 margin: 0 0 0 10px;
 display: inline; /* IE Fix */
 width: 514px;
 float: left;
 background-color: #fff;
}
#rightcolumn p.content {
border: 1px solid #fff;
 margin: 10px;
}
#rightcolumn p.content img {
 float: left;
 margin: 0px 10px 10px 0px;
}
#rightcolumn h1 {
 margin: 10px;
 padding: 3px 10px;
 border: 1px dashed #ccc;
 font-size: 24px;
 background: #EEF1ED;
}
#rightcolumn .banner {
 margin: 10px;
 border: 1px dashed #ccc;
 background-color: #EEF1ED;
}
#rightcolumn .banner img { display: block; }
/* End Parent Right Column ----------------------------------------------------------------------- */
.clear {
 clear: left;
}
#footer {
 background: #fff;
 border: 1px dashed #ccc;

}
#footer .text {
padding: 10px;
 margin: 0 auto;
 width: 710px;
 border: 1px solid #fff;
}
#footer .text a:link, #footer .text a:visited { color: #333; text-decoration: none; }
#footer .text a:hover {  color: #333; text-decoration: underline; }
#footer .text img { border: none ; }
</style>
</head>
<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
   
      <!-- Begin Left Column -->
    <div id="leftcolumn">
    
       <!-- Begin Logo -->
       <div class="logo">
        <img src="http://java2s.com/style/logo.png" alt="Code-Sucks.com - logo" />
     </div>
     <!-- End Logo -->
     
     <!-- Begin Left Box -->
       <div class="leftbox">
        <ul class="mainnav">
         <li class="heading">Heading One </li>
         <li><a href="#">Link Two</a></li>
         <li><a href="#">Link Three</a></li>
         <li><a href="#">Link Four</a></li>
         <li><a href="#">Link Five</a></li>
         <li><a href="#">Link Six</a></li>
         <li><a href="#">Link Seven</a></li>
         <li class="heading">Heading Two </li>
         <li><a href="#">Link Two</a></li>
         <li><a href="#">Link Three</a></li>
         <li><a href="#">Link Four</a></li>
         <li><a href="#">Link Five</a></li>
         <li><a href="#">Link Six</a></li>
         <li><a href="#">Link Seven</a></li>
      </ul>
     </div>
     <!-- End Second Left Box -->
    
    </div>
    <!-- End Left Column -->
    
    <!-- Begin Right Column -->
    <div id="rightcolumn">
    
       <!-- Begin Top Banner -->
       <div class="banner">
        <img src="http://java2s.com/style/logo.png" alt="Forest banner" />
     </div>
     <!-- End Top Banner -->
     
     <h1>Keith Donegan with Pale Forest </h1>
     <p class="content">
        <img src="http://java2s.com/style/logo.png" alt="Code-Sucks.com - Thumbnail" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
      <br /><br />
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
     </p>
     
     <h1>CSS / XHTML Strict Templates </h1>
     <p class="content">
        <img src="http://java2s.com/style/logo.png" alt="Code-Sucks.com - Thumbnail" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
      <br /><br />
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
     </p>
     
     <h1>CSS Layouts </h1>
     <p class="content">
        <img src="http://java2s.com/style/logo.png" alt="Code-Sucks.com - Thumbnail" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
      <br /><br />
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
     </p>
     
     <h1>Pale Forest </h1>
     <p class="content">
        <img src="http://java2s.com/style/logo.png" alt="Code-Sucks.com - Thumbnail" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
      <br /><br />
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vol. 
     </p>
    
    </div>
    <!-- End Right Column -->
      
    <div class="clear"></div>
    
   </div>  
   <!-- End Wrapper -->
   
   <div id="footer">
      <p class="text">
         <a href="">Valid XHTML</a> &nbsp;<a href="">Valid CSS</a>Copyright </p>
   </div>


   
</body>

</html>
Related examples in the same category

1.	Image float: left
2.	Image float left, (text wrap)
3.	Image floating left and right
4.	Image floating right
5.	Image floating left
6.	Image floating right 2
7.	Image floating right, left
8.	Floating the image allows the text to flow around it
9.	Text floating around image
10.	Two image float left and right separately
11.	Image floating to left
12.	Image Floating right 3
13.	floating to right with image
14.	Image float and text wraping
Image floating with text : img float « Tags « HTML / CSS

Related examples in the same category
