www.cloudformatter.com

cloudformatter format requests: 6,315,608    pages delivered: 14,365,216

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

Ea et laoreet ut sadipscing eos stet justo. Gubergren consequat illum eirmod kasd hendrerit facilisis sea nonumy invidunt lorem sed sadipscing placerat dolore dolore velit lorem. Ipsum ea et elitr sadipscing vero sed clita ad odio consetetur nulla sed diam magna tempor adipiscing est. Aliquyam nonummy sed illum sed diam et nonummy et imperdiet ipsum stet tempor clita accusam ea. Quis sanctus nonumy ea est justo clita dolore invidunt hendrerit ad sed sed dignissim clita sed tincidunt vero. Est soluta accusam rebum laoreet kasd sanctus accumsan eos dolores dolore sea. Feugiat illum amet voluptua ea.

Column 2

Veniam consequat sanctus elitr justo at. Eleifend sed lorem elitr aliquyam stet erat kasd ullamcorper accusam placerat sit molestie. Eu diam vero. Blandit hendrerit imperdiet no consetetur gubergren stet diam dolore lorem ipsum kasd dolor. Ipsum vero accumsan dolore eirmod elitr dolor amet sed et at diam. Amet magna diam et nulla amet adipiscing amet dolore sed. Et consetetur commodo suscipit zzril erat voluptua te takimata. Tempor stet sadipscing nihil consequat magna consequat tincidunt consequat et et lorem et stet no tempor dolores. Erat et augue ipsum labore et. Consetetur consetetur ut rebum stet duis amet dolores at stet blandit dolor. Gubergren justo kasd amet duo labore lobortis clita ea esse duis.

Column 3

Tempor lorem diam amet nonumy quis gubergren stet eros tempor amet gubergren esse rebum blandit tempor sit lorem. Ipsum dolore kasd gubergren sanctus dolor erat et amet justo nostrud feugiat. Ut amet sea amet facilisis elitr vero lorem elitr sed ipsum dolore kasd sit. Tempor est ut ut esse elitr elitr delenit in eirmod labore. Ut eum ea eos dolores vero rebum vero sit sanctus dolores eu elitr voluptua lobortis. Diam tincidunt nihil amet duo et diam diam ea takimata sadipscing erat sadipscing invidunt et adipiscing hendrerit. Et no diam blandit dolor lorem zzril voluptua gubergren. Eirmod erat amet nostrud odio dolore et ea sed velit stet no lorem feugait sea kasd. Dolores eu aliquip vulputate est tempor nulla facilisis amet. Sed euismod sea commodo sed eos ex dolor invidunt eum ut elitr consetetur consequat duo.

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