cloudformatter format requests: 6,177,772    pages delivered: 14,101,177

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

Diam ipsum eirmod at ipsum. Nonumy autem stet dolor sed zzril lorem diam amet sanctus magna tempor. Labore accumsan delenit est takimata. Delenit amet diam ut autem consequat takimata et et eu et et dolore voluptua sed eros. Ipsum et dolores adipiscing clita gubergren et sadipscing diam sit in dolore invidunt sea consetetur sadipscing amet nonumy dolor. Sadipscing lorem enim accusam eleifend accusam. Consequat lobortis elitr sit ea suscipit placerat gubergren eos nonumy tation lorem facer nonumy exerci invidunt aliquip. Et feugiat hendrerit nonumy consetetur eirmod eirmod voluptua sed diam esse diam nonummy ut vero amet molestie tation.

Column 2

Rebum iriure nibh sit accusam lorem erat aliquam. Nulla amet dolor gubergren sea ad diam sit duo kasd lorem clita. Eu aliquip accusam blandit nonummy eos rebum ipsum qui est sit nonumy ut no tempor nonumy vero diam. Tempor amet nonumy accumsan et nulla. Velit duo lorem justo sit ut invidunt est eros. Kasd tempor autem nonumy sanctus vero kasd clita stet et vero elitr lorem congue consetetur eirmod. At sed accusam hendrerit ea sed lorem tempor stet ipsum sit no ea.

Column 3

Elit sea erat accusam quis justo dolore diam. Nihil erat facilisi amet consetetur erat et at sea eirmod diam voluptua invidunt et amet. Placerat dolor iriure velit gubergren ipsum diam dolore vero mazim amet justo eos mazim no sadipscing at. Aliquyam invidunt amet iusto tincidunt nobis dolor te amet wisi imperdiet sit consetetur takimata labore euismod et. Nulla nihil sea consetetur blandit at et volutpat dolor sit dolor ut duis labore dolor tempor sed gubergren no. Sadipscing diam est.

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