BetterFloat was developed in response to the free 'Float' stack supplied with RapidWeaver not quite having enough customisability. In particular, it was desired to change the units of measurement for the float width and disable the float on smaller screens (while keeping the stack displayed on mobile). The settings and markup for BetterFlaot are all pretty simple. But without question, this stack has proven to be mighty-useful to lots of people in various projects. BetterFloat can help you to accomplish some quite sophisticated layouts and overcome problems faced with conventional left / right float stacks.

BetterFloat is using newer API features, and therefore requires a minimum of Stacks 3.5

Examples

Here are two examples, comprising of the RWExtras Font Awesome stack (inside the float) and some dummy 'lorem ipsum dolor' text in the main content area. Pay particular attention to the icon remaining the same size (150px) on all screen sizes. On mobile, the icon is displayed above the content. The first example keeps the content in two uniform 'columns' whereas the second example permits text to wrap underneath the floating icon.
 

First Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam velit turpis, volutpat quis condimentum non, accumsan sit amet eros. Morbi felis magna, hendrerit quis augue quis, pharetra pharetra leo. Vestibulum elementum ac justo quis convallis. Suspendisse fringilla, arcu eget accumsan lacinia, odio justo convallis urna, sed rhoncus mauris libero id velit. Curabitur egestas tellus ut nisi sodales euismod. Cras interdum in enim eu condimentum. Praesent sit amet laoreet ante, in viverra metus. Aenean nulla urna, sollicitudin et suscipit et, efficitur id massa. Integer varius justo sagittis dictum dapibus. Curabitur faucibus, mauris non ultricies hendrerit, lacus sapien rhoncus nunc, eget tincidunt urna lectus vel velit. Morbi lectus elit, elementum ut ex eu, accumsan malesuada felis. Donec eu finibus elit. Vestibulum lacinia interdum turpis, eu elementum metus placerat ac. Sed viverra blandit elit volutpat ultrices. Etiam nec auctor arcu, non eleifend massa. Aenean nec nibh quam. Quisque sed dui erat. Donec tempus varius dictum. Nullam ut maximus magna, et rutrum neque. Ut a laoreet sapien. Sed id risus justo. Mauris interdum urna eu metus finibus accumsan. Sed magna urna, laoreet eu libero et, condimentum iaculis ligula. Fusce mollis ex eu scelerisque viverra. Nulla vitae rutrum augue, at semper velit. Curabitur iaculis rhoncus magna sit amet facilisis. Mauris felis urna, lobortis a porta a, accumsan nec sem. Etiam ut libero commodo, varius tortor ut, convallis diam. Suspendisse sit amet sem scelerisque magna laoreet congue. Integer faucibus quis ante vitae posuere. Etiam mauris nisi, ullamcorper eu purus elementum, venenatis pellentesque felis. Etiam ac mauris porta ex consectetur pulvinar. Nunc id velit velit. Pellentesque nec lectus sed purus cursus scelerisque. Aliquam at nisl vel erat scelerisque volutpat. Integer eget enim tincidunt, volutpat massa non, ullamcorper erat.

Second Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam velit turpis, volutpat quis condimentum non, accumsan sit amet eros. Morbi felis magna, hendrerit quis augue quis, pharetra pharetra leo. Vestibulum elementum ac justo quis convallis. Suspendisse fringilla, arcu eget accumsan lacinia, odio justo convallis urna, sed rhoncus mauris libero id velit. Curabitur egestas tellus ut nisi sodales euismod. Cras interdum in enim eu condimentum. Praesent sit amet laoreet ante, in viverra metus. Aenean nulla urna, sollicitudin et suscipit et, efficitur id massa. Integer varius justo sagittis dictum dapibus. Curabitur faucibus, mauris non ultricies hendrerit, lacus sapien rhoncus nunc, eget tincidunt urna lectus vel velit. Morbi lectus elit, elementum ut ex eu, accumsan malesuada felis. Donec eu finibus elit. Vestibulum lacinia interdum turpis, eu elementum metus placerat ac. Sed viverra blandit elit volutpat ultrices. Etiam nec auctor arcu, non eleifend massa. Aenean nec nibh quam. Quisque sed dui erat. Donec tempus varius dictum. Nullam ut maximus magna, et rutrum neque. Ut a laoreet sapien. Sed id risus justo. Mauris interdum urna eu metus finibus accumsan. Sed magna urna, laoreet eu libero et, condimentum iaculis ligula. Fusce mollis ex eu scelerisque viverra. Nulla vitae rutrum augue, at semper velit. Curabitur iaculis rhoncus magna sit amet facilisis. Mauris felis urna, lobortis a porta a, accumsan nec sem. Etiam ut libero commodo, varius tortor ut, convallis diam. Suspendisse sit amet sem scelerisque magna laoreet congue. Integer faucibus quis ante vitae posuere. Etiam mauris nisi, ullamcorper eu purus elementum, venenatis pellentesque felis. Etiam ac mauris porta ex consectetur pulvinar. Nunc id velit velit. Pellentesque nec lectus sed purus cursus scelerisque. Aliquam at nisl vel erat scelerisque volutpat. Integer eget enim tincidunt, volutpat massa non, ullamcorper erat.
 

Setup

To use BetterFloat, follow these instructions:
  1. Once installed into Stacks and RapidWeaver, open your Stacks Library and search for 'BetterFloat'
  2. Drag and drop a copy of the stack into your webpage
  3. Place a stack within the 'float' area, like an image, a video or other simple content
  4. Enter content into the main content container. You can toggle between styled text, Markdown, HTML or Stacks
  5. Customise any of the other settings, to adjust the layout and behaviour of the float
  6. Keep previewing your page to see the results. Test it at different screen sizes. Export or publish when done.

Mousing-over individual BetterFloat settings will display a small informational tooltip about what each one does.

Please note that if setting the Main Content to 'Stacks' is it not possible to have the main content wrap under the float. This is because Stacks wraps all stack elements inside a box container. Box containers cannot be stretched to wrap around a floating element. The Wrap Main Content Under Float checkbox setting only works with styled text, Markdown, and HTML.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Pocket
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.