Why is there so much blank space under my images?
Up to Table of ContentsThis FAQ applies to: Any version.
Let's say you want an to insert and image and wrap some text around the image. Here's two examples of that, one with the image left aligned and another with the image right aligned.
Left Aligned
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id
lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl.
Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae
odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum
at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices
eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque
bibendum magna. Integer ultricies dolor at odio. Vivamus egestas
vehicula orci.
Right Aligned
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id
lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl.
Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae
odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum
at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices
eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque
bibendum magna. Integer ultricies dolor at odio. Vivamus egestas
vehicula orci.
Now let's say that you want text to appear under an image, and not wrap the text at all. In that case, you will want to use the Inline setting for images. If you use Left or Right alignment, you will have to enter several line breaks to get the text to appear under the image. The result is too much space below the image - it's nearly impossible to get it to look right. Here are examples of each scenario -
Look at this page in several browsers to see how the layout changes.
Inline Image with text below (the right way to do it)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl. Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque bibendum magna. Integer ultricies dolor at odio. Vivamus egestas vehicula orci.
Left Aligned Image with text below (not the right way)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id
lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl.
Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae
odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum
at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices
eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque
bibendum magna. Integer ultricies dolor at odio. Vivamus egestas
vehicula orci.
This section looks fine in Firefox, but there aren't enough line breaks for Internet Explorer 6 to display this properly. You could add more line breaks, but then it won't look good in Firefox! Use the Inline style and the above example will look good across all browsers.