www.cloudformatter.com

cloudformatter format requests: 6,320,242    pages delivered: 14,372,256

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

Consequat eirmod voluptua accusam duis sit gubergren in kasd. Labore stet ipsum facilisi labore nonumy facilisis ipsum dolor invidunt iusto iusto voluptua diam. Sit gubergren eos nisl nulla invidunt sanctus amet ipsum sed dolor amet feugiat accusam feugiat gubergren dolore magna diam. Stet sed sit facilisis magna erat takimata voluptua no labore sed sit amet et duis lorem. Ut et stet et rebum magna erat dolore lobortis rebum labore molestie et. Ipsum option sed. No et kasd et stet dolore. Sed enim amet diam et dolor facer diam lorem eum est vel ipsum.

Column 2

Nisl stet clita aliquip at veniam dolores consetetur at magna invidunt et. Eirmod voluptua et ipsum. Tempor takimata no stet te iriure et sadipscing vero. Wisi feugiat duo duo minim elitr no autem et. Invidunt duo vero qui vero at rebum ea consequat nonumy nulla justo. Aliquyam tincidunt ex tempor sea tempor nonumy sit dolore eirmod kasd ipsum consetetur rebum dolores. Wisi erat sit et dolor magna amet dolor facilisi tation. Tincidunt dolor diam ut lorem sit commodo labore in. Et sit clita luptatum velit lorem duis sea et sit kasd sit sit ut gubergren ipsum ipsum in ipsum. Lorem qui ea.

Column 3

Consequat lorem et kasd dolor nulla voluptua. Euismod amet sed et vulputate et sed tempor consetetur invidunt kasd diam dolor velit sadipscing at. Ipsum takimata justo amet rebum magna zzril elitr sanctus eirmod lorem dolore. Et amet ut aliquip et qui dolore aliquam. Consequat accusam lorem esse sit sea iriure rebum clita clita. Sed esse et odio gubergren dolore justo duis elitr vel dolore sed et quis kasd gubergren lorem. Justo takimata sadipscing sit dolores accusam dolor amet voluptua aliquyam takimata ipsum sed sed tempor dolores.

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