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.

example of a call me button in a sidebar menu

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.
example H.T.M.L.

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>.
example C.S.S.

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 of inline styling

Example #2: Page footer

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

example of a call me widget in a page footer

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.
example H.T.M.L.

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.
example C.S.S.