How to Reduce Whitespace on wikiHow Articles

When you add an image (or multiple images) to a step that has a bulleted or number list, those items get pushed down to a level below the image, creating a large unintended white space. This is because an image "clears" each time your press enter, preventing the text that follows (in bulleted format) from sitting next to the image. There's nothing wrong with the white space, but if the article has a lot of images and lists and you would like to minimize the white space created between them, here are some of the ways that others have done so, listed on a single page for your convenience.


  1. Image titled Reduce Whitespace on wikiHow Articles Step 1
    Lengthen the step and shrink the image. Sometimes you can lengthen the step so that the text fills up the white space next to the image. The smaller you make the image, the less white space there will be to fill.
  2. Image titled Reduce Whitespace on wikiHow Articles Step 2
    Break the list up into paragraphs instead. If each list item is a few sentences long, and there are only a few list items (2-3), you might be able to get away with having your step have multiple paragraphs instead of a list. Just add two line breaks (<br><br>) between each paragraph without pressing enter.
  3. Image titled Reduce Whitespace on wikiHow Articles Step 3
    Create the bullets manually. Before each item, insert two line breaks (<br><br>) followed by a bullet (use a hyphen or copy and paste this symbol: •). It won't look exactly like a normal bulleted list, but it gets the job done. To give indent each bullet to make it appear more like a standard list, write right before each bullet (after the line breaks). Do not press enter. This technique can make a list difficult to edit by people who aren't familiar with HTML so don't use it for long lists, or lists that are likely to have many items added.
    • Example: The formatting shown in the image was created as follows:

      # Select and obtain a [[Prune a Tree|tree]].<br><br>- Choose the type of citrus ([[Eat an Orange|oranges]], [[Eat a Lemon|lemons]], [[Wash a Grapefruit|grapefruit]], etc.) you would like to try growing.<br><br>- Ask the nursery about the climate that the particular tree is suitable for.<br><br>- If you live somewhere that's a bit colder than a strictly Mediterranean climate, look into cultivars bred for cold resistance.<br><br>- Taste the [[Preserve Fruit|fruit]], if you have the opportunity. Not all [[Make Orange Juice|oranges]] are alike. If you can taste fruit grown on a tree in your area, perhaps from a [[Get over a Crush on Your Neighbor|neighbor]], even better.<br><br>- Find out if the [[Make Fruit Salad|fruit]] produced has many seeds, or not.<br><br>- Ask for certification of the health of the [[Climb a Tree|tree]], or ask someone who's experienced with citrus trees to inspect it. See Warnings.


  • Use the least complicated method you can manage so that the text is easy for a new contributor to edit. The more intimidating it looks, the harder it'll be for people to contribute and improve the article.
  • With the templates, you can change the size or use a thumb frame, but read the instructions first:

    • Instructions for {{imagefloat}}
    • Instructions for {{textfloat}}

Article Info

Categories: Formatting | Using Images