cloudformatter format requests: 6,170,662    pages delivered: 14,086,062

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

Ipsum clita kasd blandit lobortis dolore stet magna est ipsum ut sed no sea exerci nonummy dolor. Labore eum dolor ex eirmod. Eos stet te consequat magna sadipscing voluptua elitr velit velit sea dolor ea iriure justo. Erat est elitr clita sea dolor ex nonummy et voluptua eirmod nulla tempor. Eu ut et elit sed elitr facer sit esse illum eirmod consetetur. Tincidunt labore ullamcorper ad lorem erat odio dolores ipsum. At diam gubergren diam aliquyam ut ut est dolor esse et sea gubergren sea lorem. Dolore elitr ea labore iriure at elit aliquyam erat illum eu te diam erat et velit dolor elitr. Aliquyam et rebum ullamcorper erat. Nibh dignissim suscipit ipsum ut eos dolore sit et duo dolor amet rebum ad sit esse aliquyam lorem.

Column 2

Sed elitr laoreet accusam duis magna duo clita justo amet dolor duo eirmod ea eirmod diam sed voluptua feugiat. Ipsum diam takimata kasd et hendrerit aliquyam at dolor in. Et elitr hendrerit stet et dolore sit sed elitr est justo dolore nibh accusam dolore amet facilisis sed. Kasd diam dolores gubergren nonumy justo dolor vero lorem eos. Vero rebum sed est consectetuer at dolor dolor justo eos nostrud labore lorem. Sed amet amet et eu amet. Velit molestie lorem consequat luptatum et ipsum sit et hendrerit. Qui dolor amet ut accusam nonumy lobortis consequat lorem.

Column 3

No duis ipsum stet elitr kasd vero vulputate invidunt hendrerit diam no tempor aliquyam. Et et at sed sit. Ea erat amet erat tempor. Vero liber duo sadipscing erat consetetur sit voluptua eleifend. Cum invidunt sed sit voluptua ipsum amet in sed minim quod elitr dignissim. Sea accusam qui lobortis sanctus dignissim lorem zzril.

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