www.cloudformatter.com

cloudformatter format requests: 6,282,242    pages delivered: 14,296,428

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

Many current implementations in HTML make use of responsive designs. The challenge is to try and replicate this HTML into the printed page. The trigger here is the float element. We will start with an easy example, how about replicating a drop-cap.

T
his would be a good example of a floating container. A drop capital is frequently used in book publishing. The first letter of the first word is dropped out, floated to the left of the container and rendered in a larger font. Of course, to see the effect one needs a paragraph that extends beyond the height of the drop capital letter to see the effect. So we have put a few additional sentences in this paragraph to see the effect.

Now, a slightly more complex design that one would expect from a javascript solution like Twitter Bootstrap would appear like this.

Column 1

Justo velit erat. Eum delenit autem. Invidunt rebum hendrerit at elitr feugiat sit liber hendrerit. Exerci amet augue ut diam eirmod amet duis no sit consetetur erat no dolor accusam sed lorem ad. Amet consequat et kasd ut laoreet lorem autem. Voluptua lorem sed ea ipsum cum. Gubergren sed et duis molestie quod feugait facer takimata vero lorem eirmod sit justo.

Column 2

Dolor justo eros nulla dolor labore aliquyam diam ullamcorper vero blandit. Est et aliquyam erat at no veniam justo et dolores invidunt et ipsum. Lorem labore praesent clita takimata takimata voluptua eros nonumy erat exerci et praesent at. Tempor tempor iusto vero dolore esse autem consetetur voluptua stet rebum nulla eleifend at ut commodo dolor elitr. Nulla lobortis ea congue et vero dolores consequat at labore ut dolor sed. Et duo aliquyam enim consequat velit voluptua tincidunt sea facilisi. Minim lorem at nobis et duis ullamcorper magna dolores aliquyam luptatum eos ut dolor dolore ea. Est te nostrud. Et sed labore accumsan et eirmod justo at tincidunt eirmod dolor sed. Facilisis sit sed amet praesent sed eros labore ullamcorper accusam duis sanctus est vero. Dolores nonumy laoreet dolor et ipsum sed exerci eros sadipscing sit vero.

Column 3

Tation sea aliquam duis takimata amet ut. Sadipscing accusam lorem autem sea clita qui duo dolore amet consetetur et at vel amet et vero nihil. Eirmod dolore ipsum duo et et consectetuer ipsum lorem lorem eum ipsum sit. Eos sit dolor minim justo nulla sanctus eirmod sea magna dolor. Sea option voluptua in stet facilisis erat no ipsum eu nonumy eirmod lorem dolor in stet et et et. Sadipscing duo dolor lorem vel dignissim velit et eos lorem at lorem lorem consequat stet. Eos tincidunt diam. Molestie iriure justo exerci sanctus rebum vero et invidunt ea velit eirmod nihil labore eirmod diam. Est kasd eleifend sit clita invidunt ipsum est et eirmod dolores.

And this paragraph would appear after the floats. It has "clear" both to clear the floats.