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.
Now, a slightly more complex design that one would expect from a javascript solution like Twitter Bootstrap would appear like this.
Column 1
Sed id invidunt ut duis dolore duo amet amet dignissim et ipsum dolores dolore aliquyam takimata iriure. Dolore hendrerit duo erat labore ea ut ea ut at et amet lorem. Eos et et lorem consequat tincidunt labore vero dolore dolore clita amet vero feugiat. Eros justo illum vero accusam ipsum amet et ea veniam et lorem nonummy nihil sadipscing clita. Rebum sit at et et ut volutpat diam rebum sea no tempor. Labore takimata voluptua dolore voluptua tincidunt dolores tempor. Kasd voluptua eum sit in dolores at sit feugait diam duo est tempor eum. Nulla te labore stet duo sea hendrerit sed dolore nonummy. Stet vero ipsum erat consequat clita in euismod ut molestie vero ea et.
Column 2
Consetetur labore ipsum et ut aliquyam dolore et justo dolores diam eirmod et consetetur in rebum facilisis. Labore nonumy dolor vulputate eos consectetuer sanctus et sadipscing gubergren ea est autem. Duis invidunt ea diam tempor stet et ipsum aliquam ut erat et consequat takimata volutpat elit stet vero. Lorem sed dolor aliquyam dolor diam est stet ea lorem praesent sanctus stet nonumy magna tation ut aliquyam. Consetetur commodo duo tempor sit amet kasd erat eirmod ipsum duo nonummy ea tincidunt gubergren est. Ea takimata consetetur erat dolore et sea consetetur duo erat lorem elit et kasd consequat qui. Erat clita iusto magna nulla erat sea ut dolores ea sit autem clita rebum lorem ut. Aliquyam diam ut et clita. Kasd no ut in stet sed est luptatum labore vero tempor congue.
Column 3
Veniam tempor quis et tincidunt ipsum duo takimata enim volutpat magna clita duis soluta tempor voluptua. Takimata dolores gubergren minim zzril mazim iusto ea et clita lorem et volutpat et illum aliquip dolores accusam. Consectetuer iusto ad consectetuer ut lorem no tempor takimata sit quis tempor veniam duis eros. Magna sea magna sit stet sanctus duo sed tempor ut invidunt dolor molestie zzril euismod facilisis. Sed accumsan vel no ea vero nulla sanctus sanctus illum ea qui vero nisl lorem gubergren. Tempor magna sed at sed. Ex euismod sit amet autem clita dolor tincidunt eum. Sanctus sit eirmod amet accusam at consequat ea vulputate ut eum ipsum sanctus duis luptatum invidunt tempor vel stet.
And this paragraph would appear after the floats. It has "clear" both to clear the floats.