Help:How to fix bunched-up edit links
When you have a long strip of right floated images together with a number of sections, it usually causes the section editing for the sections which start after the first image and on the screen start before the last image to bunch up to the left of the last image (see Example 1).
This causes several problems:
- It's ugly.
- It often partially overlaps with the text, making it harder to read.
- It makes it harder to actually use section editing.
There are several ways to either avoid or work around this issue.
Clearing the floats
This can be done if there is no problem adding extra whitespace before the next section (for instance, because the problem only shows in uncommon font sizes, or if the images are logically attached to sections). It consists on adding an element with the CSS property clear: both or clear: right before the next section. An easy way to do it is to use {{clear}} or {{subst:clear}}. Do not use {{clr}} or {{-}}, since it uses a legacy float clear, which does not match the CSS float used by the floated images, potentially confusing some browsers.
Moving the images around
When the article is long enough, it's possible to spread the images around, instead of having them together. It's also possible to make some of the images float left instead of right. This often is enough to fix the issue, and generally results in a prettier article.
Using a gallery
When you have too many images, it might have make sense to move some or most of them to a gallery. However, while this avoids the issue, it has issues of its own (for instance, the captions can be small to the point of being unreadable in some cases, and the image size is fixed).
Removing some of the images
It might be a good idea to question yourself whether all these images are really necessary. The images are supposed to be to illustrate the subject, not to turn an article into a gallery.
Using a floated table
This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, and a slightly different spacing between the images (on pages on other namespaces, it can also interfere with the background color; this does not happen on articles, and can be avoided with background-color: transparent). It also has the advantage of being possible to do mechanically (either with a bot or manually). However, it can only be used when the images have identical width (usually happens when all are either |thumb| or a fixed size in px, and all are wider than taller; can also happen when thumbnails are not used). The resulting code is also slightly harder to read.
To do this, first remove any |right| from the images, and add a |none| to them (this stops them from floating). Then put them in a table, giving it the following style attribute: style="float: right; clear: right" (this makes the table float, and also puts it below any other right float instead of to the left of them; it's also what's used for the right-floated images). See Example 2 for an example.
Example 1
[[Image:Wikipedesketch1.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[Image:Wikipedesketch1.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[Image:Wikipedesketch1.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example 2
{| style="float: right; clear: right; background-color: transparent"
| [[Image:Wikipedesketch1.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|-
| [[Image:Wikipedesketch1.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|-
| [[Image:Wikipedesketch1.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|}
|
|
|
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.