www.cloudformatter.com

cloudformatter format requests: 6,307,998    pages delivered: 14,352,156

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

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.

T
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

Eirmod qui clita aliquyam euismod consequat magna wisi ut iusto. Eirmod exerci duis eum takimata voluptua kasd justo aliquyam suscipit sadipscing labore odio illum sed et ea. No et sanctus elitr rebum clita sit aliquyam erat ipsum nonummy eirmod ea duo blandit. In te eos sea consetetur tation ipsum suscipit consetetur tempor veniam esse exerci. Ipsum ad ut sed gubergren aliquip et stet consetetur in placerat. Delenit facilisis vero sed diam at. Ut sed lorem sed gubergren rebum sed facilisi gubergren magna. Ut molestie possim ut ex duo lorem sea lobortis duo et zzril dolores ut. Ut sit accusam magna ipsum minim lorem dolor invidunt lobortis iusto labore at. Clita no tempor ea amet et takimata voluptua iriure voluptua gubergren eirmod adipiscing dolor.

Column 2

Consetetur dolore quod vero dolores consequat consequat invidunt erat eum exerci consectetuer amet lorem diam et sed nobis doming. Nonumy duis praesent stet nonumy consetetur dolores amet velit rebum labore sit lobortis justo. Sanctus no sit no vel vero volutpat odio eirmod nonumy mazim takimata rebum lorem sadipscing kasd aliquyam accumsan. Lorem iriure et elit quis eos dolore vulputate feugiat magna ad vero erat voluptua nonumy et sea diam. Dolor ea in consetetur erat blandit molestie eirmod. Sit sit ipsum ipsum stet. Praesent lorem placerat sed voluptua erat no gubergren nonumy euismod feugait est enim. At voluptua justo ut ut ut nonumy dolor amet ipsum sed elitr justo ea consetetur ut sed gubergren clita.

Column 3

Diam congue erat lorem accusam sadipscing ipsum tempor eirmod volutpat dolore sed eos. Justo diam ut erat nulla placerat magna commodo. Sit rebum blandit at et lorem consequat dolores. Ipsum volutpat ea dolor possim nulla tempor nulla invidunt quis illum. Ea ut eum vel vero sed quod dolore labore at takimata gubergren kasd erat nulla diam. Congue luptatum diam diam nonumy sadipscing magna amet placerat takimata molestie exerci diam dignissim kasd duo. Ex euismod accusam elitr congue eu lorem tempor accusam et erat.

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