• Individual Members
  • Early Career Members
  • Student Members
  • Student Events
    Student News
    Newsletter Archive
    Previous Articles
    Student Chapters
    Scholarships
    Student Author Travel Grants
    Newport Awards
  • Corporate Members
  • SPIE Professional Magazine
  • Visiting Lecturers
  • Women In Optics
  • BACUS Technical Group
 
Print PageEmail Page

This code is for a left-aligned image



Here's a sample caption that demonstrates how the div keeps the caption constrained to the width of the image .... well, hopefully
Well, here you have it. This particular example places the image on the left side of the page and any text accompanying it will wrap around the image and caption. There are two critical features to keep in mind when using this model. The first is that it is absolutely essential to set the width of the internal div (the one with multiple style commands) to the width of the image you're using. We can build a separate version of the div for each standardized image size once those are developed. The other crucial bit is the accompanying text must start even with the top of the image. It can extend down below the bottom of the image/caption as this text block demonstrates, but it can't start above and flow around the image/caption from both the top and the bottom. Should be a fairly minor issue however.



This code is for a right-aligned image




Here's a sample caption that demonstrates how the div keeps the caption constrained to the width of the image .... well, hopefully
Well, here you have it. This particular example places the image on the left side of the page and any text accompanying it will wrap around the image and caption. There are two critical features to keep in mind when using this model. The first is that it is absolutely essential to set the width of the internal div (the one with multiple style commands) to the width of the image you're using. We can build a separate version of the div for each standardized image size once those are developed. The other crucial bit is the accompanying text must start even with the top of the image. It can extend down below the bottom of the image/caption as this text block demonstrates, but it can't start above and flow around the image/caption from both the top and the bottom. Should be a fairly minor issue however.

Play video: QuickTime | Windows Media