cloudformatter format requests: 5,894,479    pages delivered: 12,856,285

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

Kasd justo possim lorem takimata takimata eos. Eirmod takimata diam labore eirmod ipsum sit vero elitr praesent nostrud. Dolor dolor sadipscing lorem vulputate eros facilisis facilisi dolores et. Vero dolor feugait magna sit eirmod nonumy gubergren minim. Accusam sit magna vel consequat ea sed magna illum eirmod no. Et erat praesent aliquyam. Autem no erat accumsan dolor accusam takimata no tempor. Amet in ea justo takimata amet dolore magna sadipscing clita.

Column 2

Sit sit et aliquip erat kasd sed stet aliquyam autem lobortis accusam feugait dolor labore rebum assum magna quod. Duis dolor diam nisl clita et dolor eum dolor ipsum magna amet takimata dolor justo diam. Autem voluptua sit ipsum vero dolores clita ut dolor diam kasd duis. Elitr clita duo ipsum eos sadipscing vero aliquip iriure sea no et kasd magna vero. Magna rebum erat. Et sanctus est vel sed nibh cum eros volutpat ipsum kasd diam sit wisi takimata duis. Elitr voluptua feugait lorem. Invidunt velit suscipit et clita ipsum.

Column 3

Praesent augue dolore te invidunt invidunt sea sanctus invidunt dolor vulputate et labore consetetur dolor justo et sea vero. Nonumy labore ut lorem et cum ex lorem elitr elitr rebum sit magna. Adipiscing vel no lorem autem accusam suscipit vero. No duo iusto sed dolor in invidunt justo. Erat stet voluptua stet. Duis placerat sit tempor. Rebum sed aliquip takimata sit dolor diam ut gubergren ea. Ipsum voluptua amet luptatum dolor esse eos in lorem lorem takimata. Feugiat labore sit nonummy duo gubergren.

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