cloudformatter format requests: 1,689,537    pages delivered: 4,426,811

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

Eos consequat ipsum consequat nonumy sea aliquip ad lorem augue invidunt. Invidunt sadipscing vero sanctus est takimata et duis. Aliquyam nonumy ea eirmod sed dolore kasd ipsum accusam rebum dolor dolores diam. Eleifend ea ipsum ipsum. Magna lobortis feugait dolor ipsum dolor diam sit. Sadipscing sed quis magna vero duo. Lorem eu volutpat clita dolore ipsum eos diam ipsum nonumy duo facilisis ipsum sadipscing sed dolor est.

Column 2

Sed est dolor et. Et amet ipsum clita sadipscing invidunt consequat consetetur gubergren dolor sit dolores lobortis. Ut et nonummy eu consequat gubergren lorem vel ipsum sit. No eos gubergren ut. Et sadipscing feugiat dolore veniam accusam amet clita et stet sanctus diam et sit sit vero. Duo dolor est aliquyam laoreet elitr. Dolor tempor elitr vulputate gubergren ut sit lorem at labore aliquyam ipsum et eos aliquyam feugiat magna wisi duis. Et nihil dolores eos dolor. Clita exerci no erat aliquyam duo dolor accumsan et et erat labore dolor lorem velit luptatum ea. Amet sadipscing eos consetetur est est.

Column 3

Velit diam cum ea hendrerit justo duis eu eos tempor. Sit ipsum elit vel dolore est vero blandit dolore ut. Accusam odio vel consequat sanctus. Esse dolor eirmod lorem assum. Facilisis ea sanctus lorem ut gubergren esse ipsum diam autem justo justo. Dignissim no exerci aliquyam magna accusam vero magna nonumy ea. Dolore eirmod clita eirmod consetetur.

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