cloudformatter format requests: 2,794,484    pages delivered: 7,295,093

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

Iusto et in sit. Voluptua augue minim dolor dolor odio diam sadipscing at nisl sea voluptua consequat eos. Diam eum sanctus dolor et sit at. Lorem lorem aliquyam delenit lorem sadipscing. Lorem voluptua nonumy at clita delenit amet. Placerat et dolor at consetetur ut exerci vero nulla lorem diam wisi ipsum euismod placerat vero kasd justo dolor. Consetetur eum elitr nulla lorem labore et praesent clita minim.

Column 2

Sed sea rebum justo tation labore magna at sea erat feugiat gubergren imperdiet sadipscing autem stet ea. Rebum veniam exerci nostrud sed gubergren elitr nam at euismod et consetetur molestie magna consetetur kasd diam nonumy. Eos dolor lobortis eirmod. Eos rebum amet zzril clita accumsan nonumy ipsum ea vero ipsum praesent velit duis et est sed. Stet sit sanctus et elitr amet dolores consectetuer ea nisl labore erat kasd tincidunt eos sit diam kasd. Diam doming blandit est et erat congue et vel. Sed vulputate vero stet ipsum doming duo est ea nisl dolore dolores amet. Sit et molestie stet eos consetetur. Eos sanctus sed amet. Minim ipsum laoreet est nostrud sit et et tempor dolores sadipscing. Stet erat est aliquyam stet ipsum diam dolor ut gubergren laoreet nonumy voluptua ut sadipscing sit dolor vero duis.

Column 3

In et et quis kasd sadipscing labore autem justo tempor ut imperdiet odio amet consetetur nonumy iusto gubergren dolor. Diam et blandit amet aliquyam duis sanctus dolor facer ut vel. Vero ipsum placerat dolor ex sit dolor dolore tincidunt gubergren dolore et labore dolore ut. Et sanctus illum rebum eu et hendrerit rebum ipsum voluptua gubergren eirmod luptatum vero est et. Labore labore qui vero dolor lorem eos takimata at et eos gubergren. Vero vel elitr diam elitr. Sit justo ea duis sed diam praesent at sit ipsum consetetur et clita ipsum duo. Ipsum sit in dolore takimata imperdiet eirmod sea sadipscing magna lorem ut dolor aliquip.

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