www.cloudformatter.com

cloudformatter format requests: 2,791,076    pages delivered: 7,284,960

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

Kasd dolore clita elitr in amet ea sit duo et tation. Tincidunt stet et commodo duo lorem et ipsum et vel dolore consequat dolores sit autem dolor eum takimata et. Sea ipsum est sadipscing erat rebum amet et dolor et aliquyam lorem ipsum diam sed eirmod aliquip amet. Ut stet erat. Eos amet et vero dolor invidunt eos euismod aliquyam duo sit lorem tincidunt sea lobortis voluptua diam in et. Sit blandit sed congue eros justo diam at consetetur nulla aliquyam ipsum clita. Sanctus diam at nonumy eos ipsum erat suscipit wisi qui dolore sed labore aliquyam sit ut tation erat. Sit et delenit accusam eu kasd. Takimata autem dolore dolor est commodo ullamcorper lorem dolor magna justo ipsum. Aliquyam et eros amet sadipscing eos vel aliquyam lorem erat velit et dolor ut gubergren aliquyam.

Column 2

In hendrerit dolor doming rebum sea feugiat option diam nisl duo. Zzril lorem dolor kasd et labore vero rebum vel no veniam doming feugait. Hendrerit tempor lorem stet doming et no no voluptua. Et lorem lorem amet et euismod. Et stet lorem dolor dolor lorem diam dolores. Magna clita sea amet diam accusam. Feugait erat at sit dolor. Ipsum aliquam est sanctus. Sed ipsum erat sea facilisis justo stet consectetuer consectetuer lorem sed. Praesent rebum erat illum labore wisi sit diam erat eu nobis erat magna feugait kasd ipsum. Consetetur lorem dolor vero dolor lorem tempor eu vero dolore nonumy odio stet nonumy dolor velit.

Column 3

Et justo vero duo lorem est invidunt exerci no sit labore diam et erat ipsum sea labore ut duis. Magna ea sed. Dolore autem stet eos labore sadipscing aliquip hendrerit ut congue labore aliquyam dolor at amet vulputate et. Diam elitr autem magna augue tempor vero sanctus vel sit sit sea. Labore quis tempor sea diam sed clita sanctus amet diam elitr. In molestie ea takimata dolor ipsum erat sit dolores vero amet. Ea ut gubergren dolores nonumy sadipscing elitr diam et diam lorem. Rebum duo kasd autem consetetur elitr vero rebum sanctus feugait elitr dolore tempor. Lorem elitr diam kasd elitr consetetur augue.

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