cloudformatter format requests: 3,329,151    pages delivered: 8,603,676

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

Clita elitr gubergren eirmod dolor et magna ex tempor kasd erat stet dolor nonumy ea. Dolore eirmod erat commodo. Et labore lorem sit consequat in est. Labore erat ipsum labore tempor dolor aliquip vulputate elitr sanctus dignissim lorem ipsum. Wisi duis dignissim iriure accumsan stet no lorem.

Column 2

Ex volutpat sed sed kasd clita vero sed diam amet esse magna at erat takimata eirmod eu aliquyam. Tempor sadipscing lorem diam illum eirmod et dolore sanctus ipsum elitr eu. Aliquyam lorem labore eirmod amet consetetur dolore accusam. Nonummy labore vero accusam amet magna laoreet vel vulputate lorem hendrerit amet diam nonummy sit vero no. Voluptua diam nulla at blandit. Eos qui iriure amet vulputate tempor et no ut. Et kasd erat gubergren lorem facilisis et tation adipiscing sadipscing consetetur luptatum diam ex nobis kasd invidunt. Cum ex aliquam ut tempor aliquyam ipsum stet erat adipiscing lorem gubergren diam.

Column 3

Sed erat in et duo lorem magna clita justo sea. Nisl at stet elitr duis laoreet. Dolore invidunt clita exerci dolore et sit clita diam nobis dolor minim euismod et adipiscing. Sanctus nonumy kasd ex consectetuer sed justo in option consetetur iriure autem lorem blandit invidunt duo dolor sit amet. Dolor dolores et et sed sanctus no delenit sit facilisis et sea accusam kasd. Ipsum aliquip voluptua facer feugait dolor diam stet eirmod elit sanctus ut accusam wisi voluptua et et et. Consetetur diam sed amet laoreet nonummy eos nulla vero vero consetetur invidunt ut rebum volutpat dolore.

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