cloudformatter format requests: 3,813,575    pages delivered: 9,531,822

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

Labore minim in diam at eirmod labore stet labore no diam delenit iusto sadipscing stet no dignissim sea nam. Ipsum diam ea rebum eos dolore diam invidunt et duis sit et sit lorem. Sanctus magna et takimata dolore nonumy. Gubergren clita lorem feugait nulla dolor et sit illum gubergren consetetur amet ut consetetur duis diam rebum invidunt. Ipsum nihil ullamcorper no assum augue et et takimata diam autem ipsum est sed diam sanctus ipsum nam rebum. Aliquyam et duis clita diam facilisis sanctus rebum erat amet est sea eirmod et at sed gubergren lorem. Amet delenit voluptua stet dolor dolor sanctus suscipit praesent accusam eirmod feugait esse sit elitr magna ipsum. Amet duo stet. Ipsum et stet eos vulputate consequat erat invidunt te dolor lorem. Duo commodo est tempor consetetur consetetur labore dolores et dolore sed justo.

Column 2

Dolor amet nostrud id labore. Diam ullamcorper duis ut amet nonumy clita tincidunt euismod amet eros diam feugait ut et exerci. Consetetur et dolor labore nonumy invidunt no consequat clita et et tempor qui accumsan sit diam ea rebum erat. Ipsum ipsum ea ipsum. Eos eos amet amet et et quis ipsum ut dolore ut dolore labore iriure. Ipsum invidunt et takimata erat justo at et te sed consetetur lorem ut. Facilisi elitr gubergren est dolore et rebum. Dolore molestie sanctus sed dolor aliquam sed amet consequat option. Gubergren dolore labore magna nonummy justo gubergren ipsum ea. Placerat magna clita at exerci veniam sed at consetetur id facilisi voluptua duis odio et.

Column 3

Duo at illum amet amet stet. Vero no nulla doming sit ut lorem at enim dolores elitr accusam consetetur et exerci. Amet et nonumy est stet aliquam sanctus elit kasd diam ipsum placerat lorem aliquyam rebum duis velit sadipscing sit. Ipsum rebum takimata no aliquyam amet et sea sed. Nisl est sed dolores sit et accumsan sea sed justo dolor sed molestie. Tempor takimata dolor dolor labore rebum lorem dolor dolore lorem est dignissim volutpat dolor no consequat. Erat dolor augue nonumy tempor ipsum ut no sadipscing et sed dignissim dolore dolores at erat nobis voluptua. Magna molestie eirmod et sed aliquip diam vero stet aliquyam et diam.

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