Float Container

Float Container

This page describes how to use the page styling tool 'Float-Container'. It's used to define an environment where content (text, in most cases) can flow around other objects (boxes, images, ... in most cases). This is preferred over defining tables to for objects and text side by side, since 'Float-Containers' are responsive for different screensizes like mobile.

There are two variants: "float-container-item-left" and "float-container-item-right", depending on where you want the object to be.

Useage is best explained via examples:

Example left

Lorem ipsum dolor sit amet... 
<div class="float-container">
<div class="float-container-item-left">
{{Template or something that puts a pink box here}}
</div>
== Heading ==
Praesent at metus ante...
</div>
Nulla dignissim efficitur mi...
 

Results in...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor ante at nunc ultrices, in tincidunt sapien interdum. Nam ut scelerisque justo, et hendrerit diam. Fusce quis odio ante...

Heading

Praesent at metus ante. In velit enim, suscipit egestas eros et, rutrum posuere velit. Suspendisse eget lacinia elit. Integer interdum accumsan mi a porta. Suspendisse velit sem, semper a enim vel, dictum eleifend metus. Quisque nunc turpis, rhoncus nec ipsum sed, ornare tempor est. Curabitur id magna rutrum ex varius convallis elementum dapibus ipsum. Cras id hendrerit lectus. Etiam urna nisl, cursus pretium urna eu, efficitur molestie risus. Integer et pulvinar mi. Vivamus rutrum neque at orci scelerisque ornare. Integer et urna lectus. Etiam convallis dui vitae neque accumsan, a venenatis ipsum bibendum. Nulla at nibh ac ex viverra sollicitudin quis ac est. Proin mattis diam nisl, ac ullamcorper eros dapibus a. Ut gravida, risus id aliquet semper, tortor nibh lacinia leo, non tincidunt felis elit sit amet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vitae accumsan sapien. Nullam at purus feugiat, blandit risus vel, consectetur massa. Vivamus ac lorem id sapien condimentum eleifend nec ac turpis. Suspendisse potenti. Cras ultricies luctus nibh, at dignissim sapien dignissim ac. Cras varius dapibus pretium. Donec rhoncus, augue a elementum mattis, mi diam commodo enim, at laoreet tellus libero eget magna. Quisque ipsum eros, interdum eget velit eget, vestibulum aliquet tellus. Vestibulum ut enim quis ex fringilla suscipit. Phasellus placerat iaculis ultrices.

Nulla dignissim efficitur mi, quis molestie elit ornare a. Nam vel tincidunt metus. Fusce vitae finibus turpis. Mauris id justo at orci tincidunt iaculis...

---

Example right

Lorem ipsum dolor sit amet... 
<div class="float-container">
<div class="float-container-item-right">
{{Template or something that puts a pink box here}}
</div>
== Heading ==
Praesent at metus ante...
</div>
Nulla dignissim efficitur mi...
 

Results in...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor ante at nunc ultrices, in tincidunt sapien interdum. Nam ut scelerisque justo, et hendrerit diam. Fusce quis odio ante...

Heading

Praesent at metus ante. In velit enim, suscipit egestas eros et, rutrum posuere velit. Suspendisse eget lacinia elit. Integer interdum accumsan mi a porta. Suspendisse velit sem, semper a enim vel, dictum eleifend metus. Quisque nunc turpis, rhoncus nec ipsum sed, ornare tempor est. Curabitur id magna rutrum ex varius convallis elementum dapibus ipsum. Cras id hendrerit lectus. Etiam urna nisl, cursus pretium urna eu, efficitur molestie risus. Integer et pulvinar mi. Vivamus rutrum neque at orci scelerisque ornare. Integer et urna lectus. Etiam convallis dui vitae neque accumsan, a venenatis ipsum bibendum. Nulla at nibh ac ex viverra sollicitudin quis ac est. Proin mattis diam nisl, ac ullamcorper eros dapibus a. Ut gravida, risus id aliquet semper, tortor nibh lacinia leo, non tincidunt felis elit sit amet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vitae accumsan sapien. Nullam at purus feugiat, blandit risus vel, consectetur massa. Vivamus ac lorem id sapien condimentum eleifend nec ac turpis. Suspendisse potenti. Cras ultricies luctus nibh, at dignissim sapien dignissim ac. Cras varius dapibus pretium. Donec rhoncus, augue a elementum mattis, mi diam commodo enim, at laoreet tellus libero eget magna. Quisque ipsum eros, interdum eget velit eget, vestibulum aliquet tellus. Vestibulum ut enim quis ex fringilla suscipit. Phasellus placerat iaculis ultrices.

Nulla dignissim efficitur mi, quis molestie elit ornare a. Nam vel tincidunt metus. Fusce vitae finibus turpis. Mauris id justo at orci tincidunt iaculis...

---