Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

Stacks Image 91039

SmartFloat Stack example #2

width of the floating element


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

The width of the floating element is measured from the outer border (left or right; left in this example) to the middle between the side of the wrapping element and the wrapping content
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 is the floating element. Its width is set to 50%.

On screens wider than 768px, this element ‘floats’, so the text on the right (the wrapping element) wraps around it.

On smaller screens, this element is shown above the wrapping element.

This is the wrapping element.

For the sake of convenience, the text is justified and has a pink background.

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.

Lorem facer nonummy aliquip liber littera. Delenit eleifend claritatem littera nunc tation. Veniam duis in erat ad nulla. Dolor dolore commodo dolore nam non. Vel iis veniam etiam nam diam. Et ullamcorper decima iusto formas in. Ut elit nam consequat consuetudium vel. Soluta consectetuer claram quod minim ut. Aliquam ut est saepius insitam humanitatis. Eodem doming esse facer autem exerci.

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