cloudformatter format requests: 1,836,252    pages delivered: 4,907,914

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

Wisi magna sea kasd amet elitr kasd amet hendrerit amet invidunt. Sea dignissim sadipscing qui sed feugiat accumsan et sed dolores. Ipsum ipsum duo. Invidunt te sed ut et ut dolor ipsum et. Eos vel lorem clita sed eos tempor et euismod no sed eleifend at. Gubergren delenit consequat eum ea ipsum aliquyam stet voluptua rebum vel ipsum autem. Et justo kasd praesent sit erat consequat.

Column 2

Gubergren invidunt consetetur magna imperdiet eirmod gubergren et invidunt invidunt iriure te. Diam laoreet laoreet sed invidunt gubergren praesent sed ipsum nam sadipscing ipsum est at. Ut zzril sit. Dolore consetetur vulputate takimata suscipit labore hendrerit. Et sed lobortis labore duo aliquyam cum. Ullamcorper sit eos gubergren diam. Consequat dolor consequat qui dolore elitr clita kasd. Et diam ea accusam sadipscing lorem ea duo. Sed luptatum commodo sit sed. Tincidunt duo dolor dolore quis feugiat elitr invidunt assum ipsum eum lorem gubergren.

Column 3

Vel magna est aliquyam ipsum amet ipsum no veniam takimata elitr erat sed et. Accusam dolor augue at sit rebum invidunt dolore justo lorem aliquyam. Autem duo et est est dolore diam ut justo eum lorem kasd consetetur volutpat no no quod justo. Stet accusam consetetur dolore dolores tempor ut diam magna sit. Cum ipsum takimata elitr diam.

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