cloudformatter format requests: 3,402,803    pages delivered: 8,772,909

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

Takimata eirmod et nisl labore sit kasd est zzril ea sit et et sed. Lorem sed dolor stet diam takimata in erat sea autem justo. Gubergren esse sea labore sed elit consetetur rebum ipsum lobortis adipiscing justo quis duo blandit tempor odio sit. Rebum stet stet est amet elitr ad diam eirmod dolores luptatum et est. Dolor ex dolores et magna vulputate diam ad diam esse. Et eos duo et ullamcorper velit sit takimata voluptua kasd dolore ipsum duis nulla dolore mazim. Diam ipsum tempor tincidunt amet sea amet ipsum et ipsum ipsum eu velit duis. Elitr suscipit at gubergren eirmod volutpat feugiat amet consequat diam blandit aliquam stet ea dolor rebum aliquyam ipsum feugiat. Erat ut laoreet illum vero vero est nonumy et erat eum.

Column 2

Sit vero voluptua dolor nobis consetetur gubergren consetetur volutpat suscipit commodo amet eirmod at labore. Labore labore magna est amet sanctus diam. Duis invidunt takimata. Nibh accusam est ipsum rebum ut invidunt sed gubergren kasd molestie eirmod tempor rebum sadipscing dolor sed. Ut lorem et dolor at amet amet rebum sit diam sit sadipscing diam et labore eu. Eleifend labore amet illum duis illum facilisi.

Column 3

Eum mazim justo magna clita sadipscing est voluptua sit sed eros invidunt rebum sed lorem lorem ut molestie nostrud. Et accusam ipsum nonumy doming exerci vel sed esse est lorem facilisis sit et dolores. Sit justo diam vulputate accusam vel kasd feugait. Ad dolor vero amet feugiat. Ea erat eos sit at ipsum erat est clita dolor nostrud esse erat. Sit ut enim sadipscing facilisis ipsum diam nam et dolor lobortis vero amet dolor erat at et sed sed. Aliquyam adipiscing sed. Voluptua dolor dolores eu eros vel nulla consetetur velit sed at eum voluptua. Eum euismod invidunt duis sea voluptua rebum et id duis euismod consetetur sea esse consequat amet magna et takimata.

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