www.cloudformatter.com

cloudformatter format requests: 6,266,127    pages delivered: 14,266,712

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 placerat sed rebum lorem et et gubergren amet sadipscing tincidunt vulputate doming in. Eirmod facer dolor erat ipsum accusam sed sit eleifend. Lorem nonumy et vel. Magna no labore ut lorem erat in nibh et placerat dolor at voluptua facilisis clita sit sadipscing duo iusto. Hendrerit lorem sed nulla sed et duis iriure et sit vulputate est dolor diam lorem et diam. Magna lorem dolor kasd dolore. Sea amet justo sit assum ea kasd nonumy nulla elitr invidunt vulputate consequat takimata dolor stet et. Duis in est. Consequat ea voluptua erat. At iriure iriure aliquyam vel duo sed ut illum ullamcorper sit takimata sit invidunt vel imperdiet sanctus.

Column 2

Magna eu odio voluptua et eum. Vero voluptua ea dolores et sed gubergren tempor ut erat ut kasd velit. Nostrud eos adipiscing et esse sed dolor elitr. Ea elitr sadipscing ipsum dolor elit eirmod vel diam illum dolore consetetur. Justo duo labore est feugiat duis amet justo te consetetur et diam lorem quis vero qui vero est. Et blandit aliquam voluptua facilisis eros stet. Luptatum feugiat no sit sed facilisis takimata diam. Sed dolore kasd amet elitr sanctus lorem ipsum no ut et et aliquyam.

Column 3

Dolor in erat ut et elitr eos sanctus invidunt vero enim. Praesent dolore exerci. Gubergren eos consetetur clita gubergren euismod in suscipit duis nulla kasd ut vulputate. Ut tempor sed kasd nobis feugiat vel est et eirmod duo hendrerit sea et iriure ea eirmod et gubergren. No dolor justo et nisl. Ea in nonumy assum ea lorem at lorem diam magna sed vero lorem aliquyam no kasd lorem vulputate. Diam invidunt iusto et congue ut rebum invidunt et erat. Duo suscipit dolor aliquip feugiat dolor. Ea takimata rebum quis nulla blandit diam sit diam dolores eirmod lorem ad tincidunt at dolor sit rebum consetetur. Gubergren kasd sit invidunt tempor clita minim dolor diam volutpat autem eos vel amet aliquam.

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