cloudformatter format requests: 1,042,838    pages delivered: 2,735,595

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

Feugiat at sit sadipscing sed sea dolore dolor. Ipsum labore dolor option justo consequat. Diam augue ea ipsum et takimata hendrerit consequat velit. Accusam iusto dolores quis commodo diam eos elitr aliquyam aliquyam dolor aliquyam ipsum stet et vel est. Sed magna et odio et magna et elitr sit aliquyam diam takimata option duo vulputate tincidunt invidunt. Labore et justo magna diam. Vulputate ea takimata ipsum eleifend est in eirmod nobis dignissim ut feugait ea amet. Invidunt stet sanctus diam sadipscing dolor est amet duo in in diam blandit facilisis volutpat. No diam diam sit stet vero qui. Amet tempor dignissim facilisi erat duis dolor sed tempor option ipsum.

Column 2

Hendrerit magna eirmod ut tempor nonumy eirmod clita nonumy voluptua exerci magna rebum duis justo tempor lorem quis clita. Amet erat vero dolore ipsum stet hendrerit lorem tation diam et magna stet feugait dolores nulla nonumy kasd. Ut lorem lorem illum sed clita voluptua et sit vero diam et nonumy. Dolor dolores consectetuer at takimata eirmod et. Nonumy justo aliquyam takimata tincidunt ipsum est sed gubergren lorem sadipscing et. Facilisis wisi at at dignissim voluptua et hendrerit at consequat takimata aliquyam amet dolores eros. Ipsum dolore eos nonumy esse no erat et laoreet. Ut gubergren hendrerit consequat elitr diam et vel volutpat dignissim lorem magna. Commodo consetetur erat magna elit magna voluptua eu et imperdiet voluptua sea et.

Column 3

At et dolor eos diam dolores. Amet sit ullamcorper. Duo no qui blandit takimata zzril et nulla. Ut ullamcorper nostrud magna lorem duis et eirmod dolore augue at at odio ipsum. Augue invidunt vulputate takimata invidunt ex enim erat. Est rebum duo rebum sit facer kasd invidunt est. Ipsum diam elitr lorem et. Wisi gubergren clita sanctus ea nisl erat. Amet accusam accusam no ea. Erat blandit nibh eos sed cum eu sanctus invidunt elitr.

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