www.cloudformatter.com

cloudformatter format requests: 6,321,124    pages delivered: 14,373,895

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

At kasd dolore autem. Congue consetetur sanctus ut dolor illum magna et justo sanctus sed blandit. Vero lorem et mazim accusam dolore. Minim justo voluptua. Facilisis amet lorem tempor dolor ipsum adipiscing vel lorem voluptua rebum lorem aliquyam. Ea voluptua dolore et molestie dolore euismod facilisi tempor et lorem diam dolor sed amet tincidunt consequat aliquyam. Vel aliquyam sit eu diam.

Column 2

Sadipscing in in in sed consetetur invidunt. Sanctus est nonumy et blandit consetetur amet justo rebum commodo dolore clita. Dolor feugiat et justo labore est lobortis labore rebum duis aliquam ea. Eirmod sit et dolor sed duis ipsum. Ut consetetur illum ut exerci sanctus. Consetetur invidunt ut clita commodo et. Sit at vulputate id. Amet quod elitr sanctus ut tempor dolor sanctus sit amet duo lobortis qui.

Column 3

Takimata molestie voluptua eirmod at ipsum augue feugait at. Veniam lorem rebum eirmod est at at magna vero molestie ipsum sadipscing. Et aliquyam veniam amet takimata id dolor. Facilisis sanctus tation ad nonummy molestie congue tempor vero sit labore. Et accumsan sanctus nobis duo amet sadipscing vero voluptua nulla eos ut stet ut. No exerci ipsum facilisi ea amet dolore. Elitr lorem mazim sit esse aliquyam sed illum labore no minim et ullamcorper sadipscing stet dolore kasd dolor consetetur.

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