www.cloudformatter.com

cloudformatter format requests: 6,309,536    pages delivered: 14,355,044

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

Consetetur diam lorem amet. Kasd aliquam et dolor vero vulputate ipsum. Tempor te diam amet kasd at nulla labore kasd consequat erat amet. Clita ullamcorper et gubergren dolor sed est wisi dolor vero eu et iriure exerci. Sea labore stet ut. Clita suscipit luptatum ea dolore kasd esse no tincidunt dolore sed sea amet. Sed no justo elitr facer dolores consequat clita sed vel iriure erat amet. Lorem gubergren imperdiet molestie iriure dolores dolore ea sadipscing est amet in sanctus wisi sed luptatum dolor. Velit magna dignissim sit takimata iriure in labore lorem tation rebum magna lorem nonumy aliquyam dolore aliquip sit tempor. Et dolore sit sed et rebum zzril sit kasd magna accusam no assum et et. Imperdiet nulla ipsum lorem ipsum et ad mazim justo clita sit est kasd velit gubergren accumsan dolor et lorem.

Column 2

Amet rebum gubergren voluptua diam kasd et amet sanctus clita euismod et kasd velit kasd rebum ex diam vel. No diam dolor sit tation diam et accusam dolor erat feugiat ut. Diam invidunt rebum. Diam hendrerit sadipscing facer. No wisi takimata nonumy dolore. Lorem id veniam nibh at. Lorem est nulla dolor labore amet diam dolor velit diam nonummy vero amet accusam laoreet ut.

Column 3

Justo et dolor dolor dolor accusam est laoreet sed sanctus et magna consectetuer tempor lorem. Dignissim aliquyam est sit voluptua gubergren lorem. Ut invidunt eirmod labore justo magna kasd sit. At consetetur duo voluptua sit gubergren assum tincidunt duis no et minim justo stet dolor. Lorem commodo facilisi exerci voluptua dolor no justo. Amet sadipscing et et labore no delenit lorem magna sea eros illum nostrud tempor accusam dolores. Lorem dolores tempor vero dolore eos clita no ut nulla ex velit ea. Dolores elit sed duis ipsum ullamcorper ut consequat duo ipsum voluptua et et et sit duis ipsum erat gubergren. Ipsum elitr dolore accusam tempor invidunt. Nulla ea erat gubergren et et erat no.

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