Float

Use float() to float an element to the left or right side of its parent element. A newspaper layout is a classic usage where an image is floated with text wrapped around.

float(tag, side)

Arguments

tag	A tag element.
side	A responsive argument. One of "left" or "right" specifying the side to float the element.

See also

Other design utilities: active(), affix(), background(), border(), display(), font(), height(), padding(), scroll(), shadow(), width()

Examples

### Newspaper layout

div(
  div() %>%
    width(5) %>%
    height(5) %>%
    margin(right = 2) %>%
    background("amber") %>%
    float("left"),
  p(
    "Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede.",
    "Phasellus lacus.  Cras placerat accumsan nulla.",
    "Fusce sagittis, libero non molestie mollis, ",
    "magna orci ultrices dolor, at vulputate neque nulla lacinia eros."
  ),
  p(
    "Nulla facilisis, risus a rhoncus fermentum, tellus tellus",
    "lacinia purus, et dictum nunc justo sit amet elit."
  ),
  p(
    "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.",
    "Aliquam posuere.",
    "Sed id ligula quis est convallis tempor."
  )
)
#> <div>
#>   <div class="w-5 h-5 mr-2 bg-amber float-left"></div>
#>   <p>
#>     Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede.
#>     Phasellus lacus.  Cras placerat accumsan nulla.
#>     Fusce sagittis, libero non molestie mollis, 
#>     magna orci ultrices dolor, at vulputate neque nulla lacinia eros.
#>   </p>
#>   <p>
#>     Nulla facilisis, risus a rhoncus fermentum, tellus tellus
#>     lacinia purus, et dictum nunc justo sit amet elit.
#>   </p>
#>   <p>
#>     Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.
#>     Aliquam posuere.
#>     Sed id ligula quis est convallis tempor.
#>   </p>
#> </div>