Positioning Widgets with CSS Float

The CSS float property offers one way to position a widget relative to other objects on a page. It is common to use <div> elements to contain other elements, such as lists, buttons, and blocks of text on a page. By default, <div> elements stack vertically on top of each other, but you can use the float property to ensure that a particular <div> “floats” to the left or right of its parent container. This gives you more control over exactly where your widget will appear on a page, whether it is just a popup button or a complete inline widget.

This guide provides examples of using float to position Scheduler widgets in specific places on a sample web page.

Example #1: Sidebar menu

Outcome: In this example, we have placed a popup widget button directly into a sidebar menu, with a dynamic ECBT quote directly underneath.

HTML:

• The sidebar menu is placed in a <div> with the column and menu classes applied. We’ll see the styling of these classes later.
• The <div> containing the menu is placed in a <div> container with the clearfix class applied.

CSS:

• The float property is used on the column class to ensure that the sidebar menu floats to the left of its parent container.
• The clear property is used after the clearfix class to ensure that the next element is pushed below the floated <div>.

Additional HTML:

• To achieve the dynamic ECBT quote, we have added text and the ewt variable (a <span>) into the appropriate field for the Scheduler template in the Mindful UI.

Example #2: Page footer

Outcome: In this example, we have placed a popup widget into the right side of the footer of the page.

HTML:

• The button is placed in a <div> with the boxright class applied. We’ll see the styling of this class later.
• The <div> containing the button is placed in a <div> container with the clearfixLower class applied.

CSS:

• The float property is used on the box class to ensure that the other two elements in the footer (two <div>’s) float to the left.
• The float property is used on the boxright class to ensure that the button floats to the right of the other elements.
• The clear property is used after clearfixLower class to ensure that the next element is pushed below the floated <div>. In this case, there is nothing beneath that <div>, but the next item would be placed below.