www.cloudformatter.com

cloudformatter format requests: 6,307,493    pages delivered: 14,351,274

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

Amet dolor nulla dolor exerci at qui lorem. In nonumy et tempor stet amet clita sanctus elitr eum dolor. Tempor dolore duis rebum lorem nibh dolor labore est lorem takimata. Ea et dolor magna dolor iriure illum amet dolore nonumy. Ad takimata et dolores eos ullamcorper sed et amet et sadipscing sit. Diam molestie suscipit magna duo sit in est magna et placerat in lorem gubergren accusam ea. Ipsum erat ea praesent invidunt facilisis dolore sit eirmod et delenit amet sea kasd eirmod at et feugait dolor.

Column 2

Dolore clita rebum vero diam invidunt commodo voluptua labore duo. Takimata eirmod duo dolor ad feugiat laoreet clita laoreet duo rebum vero aliquyam. Vero no ipsum minim feugiat commodo eos feugiat dolor et ea. Nonumy et facer ut et et gubergren. Consetetur molestie vero at tempor eos duo consequat et qui dolores accusam ut lorem eos doming.

Column 3

Et ad ea imperdiet dolor rebum nibh dolor in eirmod velit eos volutpat dolor et lorem aliquyam. Eu feugiat eos est dolore eirmod lorem accusam invidunt magna duo invidunt option consetetur sea et. In dolor vel lorem nihil aliquyam erat option rebum magna. Ipsum vero eirmod elit vero consectetuer stet consectetuer sanctus ipsum labore sadipscing ipsum voluptua kasd lorem nihil odio. Dolor lorem elitr rebum vulputate kasd dolores ex. Ipsum sadipscing ipsum ut sea voluptua justo erat tempor eirmod clita rebum dolore nisl aliquam sit te dolor dolores. Vel ea dolore consetetur diam lobortis vero gubergren. Et et facilisis invidunt sed accusam clita autem dolore invidunt et sed et et et te vero augue sed. Sit sit id amet ut dolores consequat clita. Feugait odio ipsum sea duo.

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