Template:Box/doc

From comp.tf
< Template:Box
Revision as of 18:11, 12 July 2015 by Efefknee (talk | contribs) (Created page with "This template is to be used with fixed width objects to arrange them in a free "floating" fashion where they will take the least amount of vertical space by utalizing as much...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

This template is to be used with fixed width objects to arrange them in a free "floating" fashion where they will take the least amount of vertical space by utalizing as much horizontal space as the individual "boxes" allows. There's also no limit to the amount of boxes you want to make with this, it can be anything from 2 to however many you want. But it does look bad if the objects/boxes are of different height.

Variables[edit]

The structure is as follows {{box| first variable | optional variable (padding=) }}

  • The first variable has three values you can set it to.
start
Used for the first instance in the array.
break
Used between two boxes.
end
Used to end the array of boxes.
  • padding= Defines the distance to neighbour elements towards the right. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • padding-bottom= Defines the distance to neighbour elements towards the bottom. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • box-width= Defines the width of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • box-height= Defines the height of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).

Example[edit]

{{Box|start|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break}}
{| class="wikitable" width="400px"
|
|}
{{Box|end}}

This code will become these three boxes below, displayed either in a single row a single column or 2 on one row and 1 on the next, depending on your browser window size. Also there's no need to use padding on the last break as nothing can come after it.




Credit to Liquipedia