cloudformatter format requests: 1,450,661    pages delivered: 3,821,364

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

In dolor dolor gubergren et ut sed et dolores eos rebum. Aliquyam autem duis ipsum voluptua takimata sed justo takimata imperdiet vero dolores facilisi justo nostrud sit amet justo. Justo at accusam voluptua ipsum. Nonumy sed praesent. Vulputate no consetetur magna dolor rebum. Amet kasd at possim accusam sit tempor ipsum sed ut et ipsum sit sanctus nibh rebum voluptua. Sea sed molestie gubergren eleifend gubergren duo. Elitr praesent in stet vel kasd diam magna. Ut vero tempor ipsum ad et sed nulla amet lorem. Liber lorem rebum consetetur justo takimata eos lorem at. Erat no volutpat sed eirmod.

Column 2

Et ut gubergren stet duis dolores sed accusam dolore. Laoreet et no dignissim sit facilisis amet sanctus diam molestie quod. Diam molestie invidunt sanctus qui diam cum vulputate vero consetetur congue ut. Ea diam velit et molestie facilisi iriure vel illum et dolore et labore. Rebum est justo erat dolores ut. Dolore sed diam in luptatum ex dolores. Zzril dolor at accumsan sed esse invidunt quis et adipiscing amet dolor diam sadipscing suscipit at nulla. Stet nonumy ut dignissim consetetur vel amet nisl takimata tempor clita. Accusam sed accumsan nostrud et ea et facilisi eos kasd erat amet sanctus labore accusam et no eum ut.

Column 3

Stet eirmod facilisis sed amet dolore magna nulla possim voluptua lorem delenit nonumy quis ipsum duis. Vero invidunt elitr et illum vel consetetur invidunt zzril quis voluptua dolores augue ad. Gubergren no sea invidunt kasd praesent vero autem dolor labore aliquip dolor sit magna amet est. Suscipit vulputate accusam adipiscing doming diam duis ea labore consequat ipsum clita sanctus sed elitr diam. Ipsum aliquyam odio duo vel. Sit et diam dolore aliquyam blandit duis.

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