The {float} macro allows you to position a block of content on the left or right of the page...
While it's relatively easy to make images left or right aligned, there is no standard Wiki Markup Editor to do the same for other types of content. The {float} macro fills this gap by allowing you to make any content left or right aligned.
By default the panel will have a variable width that scales to fit the content within. However, if you set this parameter, the width will be locked and the content will wrap within the panel.
background
white
This parameter allows you to customise the panel background.
border
1px solid #CCCCCC
This parameter allows you to customise the panel border.
margin
This panel allows you to define the margin between the panel border and any content outside the panel.
padding
This panel allows you to define the padding between the panel border and the content it contains.
Examples:
Basic Use
In it's most basic form, the macro will align (or "float") content left or right:
{float:left}*Left Side*{float} In the Middle! {float:side=right}*Right Side*{float}
Resulting in this:
Left Side
In the Middle!
Right Side
Fixed Width Panel
As you can see in the previous example, the panel automatically scaled to fit the content. However, if you fix the width, the content will have to wordwrap to fit the panel:
{float:left|width=40px}*Left Side*{float} In the Middle! {float:right|width=40px}*Right
Side*{float}
Which results in:
Left Side
In the Middle!
Right Side
As you can see, the panels now take up two lines and this can result in content below the panel being affected.
Removing the Border
By default the panel will have a border as shown in the previous examples. If you want to remove it, use the following notation:
{float:right|border=none}*Panel Content*{float}
Which results in:
Panel Content
As you can see, the border is no more! This is particularly useful when you are using this macro to create customised layouts as shown in the next example...
Setting Margins and Padding
The space between the border and external content is set by the "margin" parameter and the space between the border and the internal content is set by the "padding" parameter as shown below:
{float|margin=50px|padding=0px}Internal{float}
Which results in:
Internal
As you can see, there is a bigger gap than usual (50 pixels) between the borders and the external content wheras there is no gap at all (0 pixels) between the border and the internal content.
Content Layout
As we've already shown above, the panels will force external content to wrap around them. You can get differing affects based on where you put the panels, for example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.
Border Styles
As well as simply hiding the border, as we showed earlier, you can customise it's width, colour and style using the "border" parameter, for example:
You can see examples of the various border styles available in our tutorial on the panel macro.
Colours can be specified either as hexadecimal values or colour names. You can see more examples of colour values in our tutorial on the color macro which also contains links to related resources such as colour code sheets.
Background Colour
To change the background colour of the panel, use the "background" property:
{float:background=grey}Grey Bakground{float}
Which results in:
Grey Bakground
As with borders, you can use either a colour name or a hexadecimal number. You can see some examples of background colours and links to other online resources such as colour charts in our tutorial on the bkg-color macro.
Tip:
There is also a special colour called transparent which basically removes the background from the panel.
Background Image
If you want an even more custom background for the panel, you can use an image! For example:
Each double slash generates a blank line within the panel, in order to increase it's height. The width is fixed to 200 pixels using the "width" parameter.
As you can see, there are several parts to the "background" parameter when defining images, these are:
background-image
The image URL, enclosed in url()
background-repeat
Defines whether the image should repeat and if so, in what manner.
background-attachment
By default, the background image will scroll with the rest of the page. However, if you choose fixed then the background will remain where it is while the page scrolls (watch the panel to the right as you scroll this page for an example).
Greetings from the ether.
It seems that {float} causes image links to break if ...
Greetings from the ether.
It seems that {float} causes image links to break if the image is referenced from another page.
If I use a {float:right} at the top of the page to place an element off to the side, images elsewhere on the page referenced like this – !somepage^someimage! – show up as broken. If the image is an attachment on the same page, the image does not break.
This seems to happen with other macros as well, such as {pagetree}.
Is this is bug or a feature? Are there fixes or workarounds, other than having to duplicate the same image file on every applicable page?
I'm trying to float a table (using the table macro) to the top-right of my page ...
I'm trying to float a table (using the table macro) to the top-right of my page so text will be on the left, then flow under it as it gets longer than my table. I've tried both right and left floats and my table always appears either above or below my text and not next to it. Is this just a gremlin related to tables?
FYI – I first tried doing this with section & columns, but that strips the borders from my table and doesn't allow the text to flow under the table as it grows.
.png)
by uploading a picture to their gallery.
Comments (3)
Jun 16, 2006
Anonymous says:
Greetings from the ether. It seems that {float} causes image links to break if ...Greetings from the ether.
It seems that {float} causes image links to break if the image is referenced from another page.
If I use a {float:right} at the top of the page to place an element off to the side, images elsewhere on the page referenced like this – !somepage^someimage! – show up as broken. If the image is an attachment on the same page, the image does not break.
This seems to happen with other macros as well, such as {pagetree}.
Is this is bug or a feature? Are there fixes or workarounds, other than having to duplicate the same image file on every applicable page?
Many thanks,
Charles Ellmaker
ETR Associates
Jul 07, 2007
karen lai says:
how did you get float and deck/card to get along? when i use float it bumps the ...how did you get float and deck/card to get along? when i use float it bumps the floated box outside of the card.
Jul 19, 2008
Becky Barber says:
I'm trying to float a table (using the table macro) to the top-right of my page ...I'm trying to float a table (using the table macro) to the top-right of my page so text will be on the left, then flow under it as it gets longer than my table. I've tried both right and left floats and my table always appears either above or below my text and not next to it. Is this just a gremlin related to tables?
FYI – I first tried doing this with section & columns, but that strips the borders from my table and doesn't allow the text to flow under the table as it grows.
Ideas?
Thanks!