Standard Image Widths

On the web, when a large word tries to wrap around an image in a confined space and it can't, it will drop down below the photo, resulting in awkward layout and unintended gaps. The problem might only be visible on some browsers, so you might not catch it when checking your pages.

Images using the default uniform framework will be sized to allow large words to wrap well in most browsers/platforms.

Rule of thumb: don't set height or width for images. There's no point setting a width, because it will be reset by the stylesheet. If you set a height, you will be overruling the browser's proportional sizing (based on the width set in the stylesheet) and your image will appear disproportionate or "stretched."

Here's how a small, float-right image in a tinted span-5 unit should look in your code (below) and on your page (at right):

     <div class="unit span-5">
     <div class="tinted">
              <img src="gymnast.jpg" class="small right" alt="gymnast">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.
              <div class="clear"></div>
     </div>
     </div>