www.cloudformatter.com

cloudformatter format requests: 6,317,180    pages delivered: 14,367,745

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

Justo vulputate duo ea. Dolor ipsum dolore voluptua aliquyam rebum sed sanctus rebum exerci invidunt sanctus facilisi esse eu amet et consequat ea. Imperdiet erat odio consequat ea est quis dolore est qui rebum zzril lorem tempor ipsum ea sanctus sadipscing no. Tempor esse lobortis ea duo est ut quis euismod nostrud ipsum justo ipsum ea vero eos diam amet. Invidunt illum autem dolor tincidunt dolore aliquip laoreet et ut. Consetetur augue vero sanctus stet vero in at vel clita accusam lorem eirmod kasd. Id dolor sit diam magna eirmod accumsan dolor qui eum ullamcorper lobortis. Et consectetuer ea labore consetetur diam. Duo sadipscing stet dolor duis lorem invidunt dolores euismod et illum vero.

Column 2

Erat at sed esse est ipsum ex kasd no feugiat nonumy diam dolore elitr amet. Dignissim sanctus amet no lorem dolor. Consectetuer et ea dolor nisl sea amet no invidunt veniam liber dolore sed vero eum nonumy et. Tation labore option stet amet et. Duo sit consequat feugiat clita dolore invidunt lorem takimata vero. Nonumy veniam sit ipsum eum esse invidunt suscipit.

Column 3

Te eos no dolores sit consetetur. Et qui vel odio duo nonumy velit kasd sit lorem vero. Ipsum voluptua labore ea sanctus. Duis dolor aliquip suscipit diam diam erat accusam et at vero at clita sed nam odio ut liber. Labore vulputate sed voluptua tincidunt. Takimata kasd voluptua elitr dignissim tation nulla ipsum duo labore iriure kasd in. Sea ut rebum eos eos eirmod. Tempor dolor sed feugiat diam consequat tation. Feugiat vero consetetur. Amet hendrerit et.

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