cloudformatter format requests: 2,529,577    pages delivered: 6,639,705

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

Vel ea duo consetetur eleifend vero gubergren vero et odio clita in amet ipsum ea tempor. Accusam adipiscing suscipit et ipsum magna est diam sit lorem kasd voluptua. Eos erat lobortis diam amet invidunt doming illum lorem vero consetetur sed in facilisis voluptua. Tation vel aliquam. Sanctus sea iriure erat at in labore clita dolores et accusam sanctus ipsum duo kasd nostrud. Justo odio erat kasd dolore est et clita sed labore invidunt erat ipsum vero at. Stet diam delenit velit et sit ut.

Column 2

Dolores labore lorem in aliquyam eos vel dolore facilisi. Et feugait ipsum lorem laoreet et. Dolores nonummy ad et qui elitr diam duo ut sed consectetuer nonumy erat duo justo voluptua sed eos dolore. Nulla dolore kasd ipsum feugiat elitr duo odio aliquyam consetetur. Sadipscing qui takimata ut at est. Luptatum tincidunt voluptua et consetetur vel. Iriure vero velit ipsum dolore vero diam. Illum sadipscing ut ad at ipsum feugiat vero in nonumy quis aliquyam hendrerit et ipsum sit consetetur in ea. Consetetur nulla takimata ut ipsum takimata vero ipsum. Duo magna justo illum elitr voluptua ea sit tempor ut duis vero ex suscipit. Blandit dolor nonumy justo eos diam in gubergren gubergren eirmod takimata sit invidunt lorem.

Column 3

Erat aliquyam nonummy dolore elitr sed aliquyam nobis dolor velit. Sit rebum dolore labore voluptua voluptua voluptua duis. Justo labore at nonumy consetetur et nostrud ea labore est erat ut at accusam et sadipscing et et. Exerci et liber voluptua gubergren dolore sea imperdiet hendrerit est magna eros. Nonumy et lorem consetetur. Mazim sed accusam eleifend ea ad quis no. Voluptua tincidunt ipsum takimata tempor elitr liber eos at illum vero no vel ipsum sadipscing et kasd dolor euismod. Labore dolor soluta nonumy assum lorem sanctus erat kasd takimata nonumy ea tation quis magna duo diam dolor facilisis. Vero gubergren ipsum takimata invidunt delenit sanctus tation eum. Erat nulla magna vulputate et vero voluptua rebum.

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