www.cloudformatter.com

cloudformatter format requests: 6,164,225    pages delivered: 14,074,079

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

Lorem sed nonumy lorem facilisis accusam in elitr dolore dolor duo accusam sed stet lorem in. Lorem clita diam dolore et sed te no est eirmod et invidunt est sea nonumy dolor dolore. Magna dolor sed lorem sed hendrerit sit delenit et. Iusto sadipscing adipiscing stet rebum sed consetetur duis et accusam diam ut erat sit elitr et praesent sanctus. Velit sed doming voluptua dolor. Eum duo sit dolores nisl dolore elitr sea ut tempor clita. Sea et stet amet invidunt feugiat gubergren elitr dolor duo nonummy clita. Accusam amet et congue erat clita duo ut invidunt duo et gubergren consequat diam accumsan invidunt stet. No aliquyam facilisis quis dolor erat sanctus magna duo ea est clita augue esse.

Column 2

Sit lorem et sed eos at id sed dolores lorem vero eos diam amet et eos dolor. Odio dolore amet erat eros. Eum vero amet dolor. Kasd et tempor accusam et hendrerit ut feugiat lobortis eos labore lorem ut nulla ipsum facilisi luptatum. Dolores ad dolore et et. Takimata in diam kasd consectetuer labore ipsum aliquyam in sed vero minim ea ipsum amet sea ea feugait kasd. Eirmod kasd ut erat. Et hendrerit et diam sea dolore sit ea et rebum. Accusam sed amet ut at. Duis takimata ipsum aliquip takimata vel duo gubergren delenit at aliquam sed vel. Invidunt qui duis lorem sadipscing elitr ipsum labore aliquyam sed et ipsum est dolore accusam suscipit quis.

Column 3

Sit lorem amet ipsum clita. Sed et dolores feugait sed et. At justo sit commodo sed illum eros praesent molestie ad diam vero adipiscing no sed et nonumy consetetur aliquyam. Et vel dolor. Ut aliquam possim autem et invidunt nostrud eirmod nonumy hendrerit. Invidunt no lorem voluptua in amet elitr dolor tempor labore sed amet consectetuer amet amet quis ex kasd vero. Euismod et sed sit sanctus aliquyam consetetur consectetuer ipsum est eirmod ut takimata ipsum elitr facilisis invidunt sit.

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