Difference between revisions of "Template:Clear"
Jessietail (talk | contribs) (Created page with "<div style="clear:{{{1|both}}};"></div><noinclude> stole from [http://dwarffortresswiki.org/index.php/Template:Clear dfwiki] need to remember how to use it Category:Utility...") |
Jessietail (talk | contribs) |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style="clear:{{{1|both | <includeonly><div style="clear: {{ #if: {{{1|}}} | {{{1}}} | both }};"></div></includeonly><noinclude>__NOTOC__ | ||
This template inserts a <code><nowiki><div style="clear:both;"></div></nowiki></code> block wherever it's placed. This prevents all text below the template from wrapping and forces it to display entirely after any images above the template. This can be used to stop text from flowing next to unrelated images, or to keep page formatting clean at resolutions different than what the article was written for. | |||
[[Category: | |||
==Usage instructions== | |||
To use this template, add the tag <code><nowiki>{{clear}}</nowiki></code> prior to the text intended to clear. | |||
Optionally, a parameter can be added and set to either <code>left</code> or <code>right</code> to only have it clear that side, inserting a <code><nowiki><div style="clear:left;"></div></nowiki></code> or <code><nowiki><div style="clear:right;"></div></nowiki></code> block respectively. | |||
To use this template in this way, add the tag <code><nowiki>{{clear|left}}</nowiki></code> to clear the left side, or <code><nowiki>{{clear|right}}</nowiki></code> to clear the right side. | |||
==Example without <nowiki>{{clear}}</nowiki>== | |||
[[File:HoverScout(Solo).JPG|200px|left|Example image]] | |||
This paragraph is an example paragraph that is not long enough to extend to the bottom of the example image to its left. This will result in the section immediately following this paragraph to display next to the image, despite not being related to the image. | |||
===New section without template=== | |||
See how this sentence starts next to the image? | |||
{{Clear}} | |||
==Example with <nowiki>{{clear}}</nowiki>== | |||
[[File:HoverScout(Solo).JPG|200px|left|Example image]] | |||
This paragraph is an example paragraph that is not long enough to extend to the bottom of the example image to its left. This will result in the section immediately following this paragraph to display next to the image, despite not being related to the image. | |||
<code><nowiki>{{clear}}</nowiki></code>{{clear}} | |||
===New section with template=== | |||
See how this sentence starts below the image? | |||
{{Clear}} | |||
==Example with <nowiki>{{clear|right}}</nowiki>== | |||
[[File:HoverScout(Solo).JPG|200px|left|Example image]][[File:Mehat.jpg|100px|right|Baz?]] | |||
Two images! | |||
<code><nowiki>{{clear|right}}</nowiki></code>{{clear|right}} | |||
This paragraph is starting immediately after an instance of <nowiki>{{clear|right}}</nowiki>. You can see that this new text now clears the smaller image on the right, but not the larger image on the left. | |||
{{Clear}} | |||
[[Category:Formatting templates]]</noinclude> | |||
Latest revision as of 03:56, 2 December 2017
This template inserts a <div style="clear:both;"></div> block wherever it's placed. This prevents all text below the template from wrapping and forces it to display entirely after any images above the template. This can be used to stop text from flowing next to unrelated images, or to keep page formatting clean at resolutions different than what the article was written for.
Usage instructions
To use this template, add the tag {{clear}} prior to the text intended to clear.
Optionally, a parameter can be added and set to either left or right to only have it clear that side, inserting a <div style="clear:left;"></div> or <div style="clear:right;"></div> block respectively.
To use this template in this way, add the tag {{clear|left}} to clear the left side, or {{clear|right}} to clear the right side.
Example without {{clear}}
This paragraph is an example paragraph that is not long enough to extend to the bottom of the example image to its left. This will result in the section immediately following this paragraph to display next to the image, despite not being related to the image.
New section without template
See how this sentence starts next to the image?
Example with {{clear}}
This paragraph is an example paragraph that is not long enough to extend to the bottom of the example image to its left. This will result in the section immediately following this paragraph to display next to the image, despite not being related to the image.
{{clear}}
New section with template
See how this sentence starts below the image?
Example with {{clear|right}}
Two images!
{{clear|right}}
This paragraph is starting immediately after an instance of {{clear|right}}. You can see that this new text now clears the smaller image on the right, but not the larger image on the left.
.JPG){kind=link}