Standard:

Making Text Wrap Around a Picture with CSS

1. I placed this css code in the stylesheet for images I wanted to float to the left (the .css file in your folder):

   
   
   .image{  float:left;
            margin-left:0;
            padding-right=1em;
            padding-top=1em;
            padding-bottom=1em;
            }
   

2. Below you'll see the CSS code to make images float to the right:
   
   

   
   
   .imageright{  float:right;
            margin-left:0;
            padding-right=1em;
            padding-top=1em;
            padding-bottom=1em;
            }
   

   Then, when I placed the picture on the left side in the web page, I used this code in the HTML file:

   <p class="image"><img src="luck.jpg" alt = "my tom cat..."></p>
   

   
   
   And for the right side:
   
   

   <p class="imageright"><img src="luck2.jpg" alt = "another picture of my tom cat..."></p>
   

   
   
   This accomplishes two things. First, it applies my style to the actual picture. This is what makes the text "wrap" around the picture itself. Second, the use of the alt tag creates a situation whereby if the user hovers the mouse over the picture, the "alternative" text appears. This is a feature that specifically helps visually impaired users (or people using text only browsers) make sense of your images.
   
   

   Assignment

   Take the start.htm web page you have made in class and add four pictures as in my example. Make sure your text wraps around your images (where appropriate) and that all of your images have alt tags. Alternate between left side and right side floats. You will need plenty of text in your page in order to make the wrap work. Use small pictures and copy and paste extra text as filler, as needed.
   
   << Back to Skyline