Wikipedia:Avoiding text gaps

{{nutshell|Text gaps may appear on certain browsers, but not on others. Be careful to avoid accidentally creating them.}}

There are techniques to avoid text gaps, an issue that may appear in formatted pages on certain browsers. Note well: there exist automagical templates to fix text gaps caused by image/template stacking, see Template:Stack begin for basic instructions.

Text-gaps are most likely to occur only in browsers similar to Internet Explorer (IE6, IE7, IE8,...), where a large blank area will occur to the left of an image located a few lines below an upper image (or infobox). Typically, a text-gap can be closed by moving the image (from alongside the text-gap area) to be directly stacked below the higher image (or infobox). Another solution might be to set the lower image as "|thumb|left" to display the image at the left-side margin, allowing text to wrap and fill to close the gap. Users running the Firefox browser, Google Chrome 9 or Opera 11.01 (or similar) will not experience the text-gap problem. Hence, those users might have no idea that users of IE browsers are seeing a large text-gap beside the image.

Option 1: Stack images/infobox together

width=260px style="float:right; clear:right; border:1px #888 solid; margin-left:1em;"

| Stack 2 images directly together:

File:pic1.jpg

File:pic2.jpg

: This text here, below the 2nd image, will float higher, towards the 1st image, and close any text-gap area alongside the 2nd image.

The original location of the lower image, causing a text-gap, is typically along the right-side margin. For that reason, keeping the image to the right, but moving it to be stacked, is often the easiest solution. Simply move the image-link to be directly below the upper image or infobox. If there are multiple images, positioned every few lines along the right-side margin, then consider stacking all, of the nearby images, below the 1st image in the group.

Option 2: Move the lower image to left-side

width=270px style="float:left; clear:left; border:1px #888 solid; margin-right:1em;"

| Move lower image to left side:

File:pic1.jpg

: Any text at this spot will wrap to the left, or higher, at the image (or infobox) above.

Image:pic2.jpg

: {{nowrap|This text here,}} below the 2nd image, will float to the right and higher, towards the 1st image, and close any text-gap area which was formerly alongside the 2nd image.

For articles with several long sentences in the intro, an image could be moved to the left-side margin, perhaps after the 1st paragraph of the intro text. A left-side image (with options "|thumb|left") will float, higher, allowing an infobox to be displayed at the right-side margin. A complication, with left-side images, is to be sure to word-join 3 words after the left-side image, such as: "{{nowrap|The town was founded}}" to avoid 1-word-per-line text wrapping (on narrowed windows).

Any subsequent text, below the 2nd image, will float towards the right-side of the lower image and higher, towards the 1st image, and close any text-gap area which was formerly alongside the lower image.

Option 3: Put image inside a Floatbox

A third possibility is to use {{floatbox|File:pic2.jpg}}, to cause the lower image to float to the immediate left of the upper image (or infobox), and allow any subsequent text to wrap along the left side of the page.

Wikipedia:Avoiding text gaps

Option 1: Stack images/infobox together

Option 2: Move the lower image to left-side

Option 3: Put image inside a Floatbox

See also