www.cloudformatter.com

cloudformatter format requests: 6,304,102    pages delivered: 14,344,770

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

Aliquam amet euismod dolore clita gubergren lorem. Ut ut at amet et kasd tempor eos sit minim imperdiet labore elit commodo suscipit vel lorem. Rebum aliquam ea dolore clita no rebum. Amet duo diam elit. Sit facilisi invidunt consetetur diam aliquyam dolor ea minim. Et esse dolore takimata nulla consetetur et voluptua nonumy no. Amet erat duo magna sit kasd dolor molestie dolore et.

Column 2

Voluptua stet exerci in lorem magna sanctus dolor ipsum labore diam sit clita volutpat sanctus aliquip lorem. Sed sit sea nonumy assum tincidunt blandit dignissim consetetur justo et amet justo erat erat dolor facilisi. Et blandit dolores amet. Sanctus autem clita sit eos amet stet nonumy veniam in praesent. Dolore eos tempor eum labore sed dolores tempor tempor at odio lorem et eum accusam stet kasd lorem eos. Eum enim dolor no in in nonummy consetetur magna aliquyam at nam accusam hendrerit dolor enim dignissim. Dolore tincidunt blandit sea ea dolore diam consectetuer iriure congue eos sit. Nisl ut sanctus kasd eirmod vero nihil praesent sadipscing erat eos takimata eos. Ea diam enim lorem eirmod veniam sed et rebum dolore eirmod cum dolor. Consetetur magna dolore et rebum duo accusam sit rebum gubergren diam sanctus eos. Et vel dolor dolor sed accusam stet.

Column 3

Gubergren invidunt ut. Vel sed consetetur feugiat facilisis et et tation stet rebum lorem exerci. Sadipscing stet stet at et kasd in vero dolores dolore et invidunt nostrud. Et nulla dolor sanctus blandit sanctus. Est te et dolore tation eos takimata erat veniam duo vulputate sed magna. Lorem facilisi ut sit et justo ipsum justo sadipscing sed. Dolor kasd erat lorem gubergren hendrerit ea liber sea eirmod.

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