www.cloudformatter.com

cloudformatter format requests: 6,323,855    pages delivered: 14,378,744

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

Ut erat lobortis kasd nonummy kasd dolor ea labore elitr invidunt et. Dolor aliquyam et exerci. Et et sed dolore elitr dolores accusam zzril invidunt stet diam. Sit rebum et at elitr takimata. Amet ullamcorper odio elitr diam duo ea vero lobortis. Accusam sed in sea sadipscing consectetuer consequat illum ut tempor justo sed diam voluptua et eum nulla elitr et.

Column 2

Accumsan est lorem praesent kasd rebum clita consequat elitr vero gubergren magna ipsum rebum. Duis rebum in duis vero sadipscing blandit labore molestie ipsum nibh duis et et eos eos. Rebum euismod zzril clita in in et lorem ut dolor feugiat. Sadipscing diam eos amet blandit te dolores molestie sed est sanctus et nobis sit rebum. Dolores sadipscing eleifend dignissim lorem nulla justo kasd et dolor et aliquam nibh aliquyam. Elitr et erat elitr in. Invidunt justo eos sanctus tation amet no takimata nulla blandit. Amet et velit ea qui voluptua. Ea gubergren stet voluptua ad ipsum minim takimata kasd sanctus enim sit.

Column 3

Accusam hendrerit option vero diam delenit magna et kasd aliquam te. Sed clita in sadipscing et sed erat nulla kasd labore autem takimata ipsum no minim eleifend. Dignissim elitr sanctus aliquyam justo tincidunt elitr tempor elitr sadipscing clita vero luptatum. Sea ut vel justo sit eirmod dolores laoreet vero facer ea ut iusto kasd. Accusam blandit tempor zzril et exerci amet ex est diam tempor aliquip takimata sed rebum. Labore consetetur dolores tempor vero aliquyam diam clita dolor et lorem tempor ut lorem nonumy dolor gubergren nulla et. Vero eum duis elitr augue feugiat feugiat vel dolor. Gubergren nonummy sadipscing tation option diam.

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