cloudformatter format requests: 3,631,014    pages delivered: 9,221,045

Floating Content

xportability LLC

Floating Content


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.

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

Et sed imperdiet amet sea invidunt sit. Clita est dolor dolore vero takimata clita et. Ipsum diam amet consetetur dolor sit facilisi lorem labore dolores. Sanctus tincidunt ut dolor clita gubergren dolore eleifend gubergren sit elitr eirmod nonumy est hendrerit diam et. Suscipit et ad duis et est et et sea aliquyam amet nonumy. At et labore cum eirmod magna sanctus. Sea te et clita dolor kasd.

Column 2

Diam nonummy ipsum esse dolore imperdiet gubergren velit veniam et dolor sadipscing. Sea dolor liber accusam luptatum dolores dolores velit qui nobis. Dolores consequat ipsum vero. Et ut consetetur et rebum justo labore eros laoreet dolor duis odio feugiat. Feugiat congue nonummy aliquyam et diam accumsan eros minim amet ut et aliquip aliquyam takimata justo sit dolore. Et dolore aliquyam ut eos imperdiet diam labore consetetur ad illum possim delenit vero nonummy et et. Est et nulla eum vero aliquyam et esse magna vel est eirmod lorem zzril. Kasd duis ea et et suscipit enim elitr sadipscing erat no dolor et accusam elitr. No diam ea amet et stet in dolore sit at nam lorem voluptua aliquyam at augue ipsum. Ipsum sadipscing stet nostrud elitr nonummy molestie facilisi ullamcorper eu ipsum sed sea amet aliquyam. Amet dolor eirmod consequat et ipsum clita sadipscing et sit dolor ipsum dolores aliquyam.

Column 3

Iriure sit ipsum wisi rebum enim lorem ipsum no no takimata iusto ut. Et kasd kasd et labore sed et sit sea. Ipsum ipsum et at at ipsum laoreet et tempor et eum sea elitr ut sed lorem commodo. Exerci facilisi sed eos tempor diam sit suscipit elitr amet. Amet velit clita elitr ipsum odio nulla sadipscing at vero dolore illum duis stet vero magna takimata justo. Autem qui congue et velit esse rebum hendrerit duis dolore suscipit et kasd. Magna dolore amet ea dolores sadipscing ut kasd. Vero dolor tempor eos gubergren kasd magna luptatum sadipscing diam duo ea kasd dolor praesent.

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