Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

Stacks Image 91039

SmartFloat Stack example #4

maximum width for the floating element


start | examples: #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | back to the product page

With the option set maximum width of the floating element, the width setting will be overruled if applicable. The same goes for the minimum width (see example #3).
This demo only works on screens wider than 768px. Yours isn’t :(

Please enlarge your window, or view this page on another device.
This section is exactly 50% of the width of the SmartFloat stack below.
This section has a width of 200px – the maximum width of the floating element in the SmartFloat stack below.
This is the floating element of the SmartFloat stack. It’s width is set to 50%; its maximum width to 200px.

Because the maximum width of this element (200px) is less than 50%, the 50% is overruled.
This is the wrapping element of the SmartFloat stack.

On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…