Wrapping text around an image - HTML/CSS


/ Published in: HTML
Save to your folder(s)

Wrapping text around an image - HTML/CSS


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <title>http://www.brett-munro.com - Wrapping text around an image</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8.  
  9. /* Gray background color */
  10. body {
  11. background:#cccccc;
  12. }
  13.  
  14. /* White box */
  15. #container {
  16. margin:auto;
  17. padding:20px;
  18. width:900px;
  19. background:#ffffff;
  20. }
  21.  
  22. /* Image floated right */
  23. #container img {
  24. float:right;
  25. }
  26.  
  27.  
  28.  
  29. </head>
  30.  
  31.  
  32. <div id="container">
  33.  
  34. <img src="http://img684.imageshack.us/img684/7173/networktransmitreceive.png" alt="" />
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, sapien ut ultrices facilisis, velit enim tempor leo, id vestibulum mi diam quis velit. Maecenas viverra dapibus malesuada. Proin sit amet libero eros, nec dapibus justo. Praesent turpis sapien, vulputate at accumsan eu, congue accumsan ligula. Sed egestas nunc vitae nulla consectetur lobortis. In hac habitasse platea dictumst. Quisque aliquam consectetur metus, nec sodales est lobortis eu. Phasellus dignissim cursus libero accumsan cursus. Integer elit metus, fermentum in scelerisque nec, fermentum ut risus. Mauris tincidunt convallis tempor. Nullam ornare libero neque. Aenean sollicitudin egestas dapibus. Vivamus tempor sagittis tincidunt. Pellentesque volutpat lacinia elit et venenatis. Sed gravida rhoncus libero, id consequat quam consectetur id. Curabitur pharetra sapien sit amet sem accumsan pharetra. Ut commodo est non urna interdum euismod. Quisque posuere eleifend ligula, sit amet ornare mauris tempus ut. Mauris nunc mi, porttitor non semper ut, porta sit amet justo. Donec a orci tellus.</p>
  36. <p>Suspendisse pellentesque nunc eu neque aliquam et semper libero ullamcorper. Fusce faucibus ullamcorper urna, a consequat tellus viverra id. Curabitur massa quam, malesuada in elementum id, porta in nisl. Suspendisse nec turpis urna, eget facilisis elit. Cras at massa nec ligula blandit ultricies. Nullam vel feugiat massa. Nullam blandit, mauris ut mattis aliquet, libero tellus malesuada risus, ac malesuada turpis est ac ipsum. Mauris vestibulum iaculis facilisis. Morbi orci lectus, venenatis ac pretium ac, imperdiet a mi. Ut purus turpis, porta id suscipit at, dictum ut nisi. Vivamus a mauris in orci aliquam laoreet blandit sit amet dolor. Cras hendrerit interdum fermentum. Quisque consectetur, enim et vulputate dictum, erat tellus tincidunt orci, accumsan faucibus enim velit nec diam. Pellentesque tincidunt massa vel justo fringilla nec auctor nulla auctor. Aliquam molestie gravida lorem, sit amet lobortis odio ultricies ac.</p>
  37.  
  38. <p>For more HTML/CSS tutorials visit my <a href="http://www.brett-munro.com">web design homepage</a>, or check my <a href="http://www.youtube.com/MrBrettMunro">youtube channel</a>.</p>
  39.  
  40. </div>
  41.  
  42. </body>
  43. </html>

URL: http://www.youtube.com/MrBrettMunro

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.