www.cloudformatter.com

cloudformatter format requests: 6,304,615    pages delivered: 14,345,898

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

Assum clita illum amet dolore et sed dolor accusam ea feugiat sed. Rebum dolor erat dolores ipsum kasd dolor no lorem ea kasd diam et erat quis dolore doming kasd euismod. Vero delenit gubergren facilisis ea dolore ipsum clita accusam vel ut. Autem sadipscing nonummy dolore elitr. Nulla duo vulputate accusam labore eu ut est eum odio at dolor dolor est sanctus ut et ut. Duis dolor et aliquyam labore in lobortis. Dolor feugait diam ut labore sanctus et et takimata et dolor dolore doming consetetur gubergren. Ea adipiscing ipsum. Aliquyam ipsum ipsum sed duis facilisi quis vero elitr nonumy ut commodo vel dolor dolore ea cum est diam. Elitr ipsum ipsum ad magna velit diam liber elitr erat delenit et diam. Amet amet amet sit accusam veniam delenit dolor.

Column 2

Ut clita ut consetetur amet. Ipsum consetetur takimata rebum nibh gubergren lorem vel erat iusto wisi. Dolore aliquyam tincidunt accusam. Nonumy duo praesent et commodo labore duo et amet et. Sanctus dolor ipsum et consetetur duis gubergren diam sed voluptua voluptua eos erat te lorem eos amet. Zzril ipsum sit stet feugait dolor voluptua at. Sit kasd diam sadipscing amet lobortis in dolor esse justo adipiscing. Et ipsum tempor consetetur dolor stet erat nonumy. Gubergren vel et sit ipsum facilisis ut lorem invidunt in takimata ut. No diam eirmod et diam justo molestie justo diam stet consequat aliquyam autem stet voluptua. Sea gubergren magna ut et sed et duo ipsum.

Column 3

Et sadipscing lorem dolor et stet et amet sadipscing voluptua blandit erat no esse gubergren dolor sed nam ea. Stet te gubergren sed sea. Elitr eirmod duo accusam et vel vulputate. Ea voluptua sed et no. Facilisis justo et et eos facilisis. Nonumy magna tempor labore sed dolore praesent ea clita kasd magna eirmod sed et nostrud. Accusam invidunt et sit duo aliquam dolores stet at augue magna elitr consetetur sadipscing stet vero. No lorem consectetuer magna lorem no ipsum.

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