Posted By

MrBrettMunro on 05/23/10


Tagged

css image float html web design floats


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

abbyabigale


Wrapping text around an image - HTML/CSS


 / Published in: HTML
 

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

Wrapping text around an image - HTML/CSS

  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>

Report this snippet  

You need to login to post a comment.