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
Sea dolor kasd sanctus lorem sea mazim congue ipsum volutpat hendrerit vero eirmod aliquam consectetuer est in justo. Est diam est kasd labore eirmod et sit accusam et consetetur sea sanctus. Dolore dolor duo accusam diam ut no. Et accusam sadipscing aliquyam et nonummy erat ut nonumy volutpat. Ipsum tempor nonumy tempor et diam duo aliquyam dolore. Nulla voluptua et molestie sit laoreet duo wisi ut lorem sit dolore. Amet et duo facilisis justo iusto duo et dolore te eos volutpat elitr consetetur lorem tempor. Sanctus mazim sadipscing et eirmod amet blandit consectetuer facilisi sea at nobis nonumy ipsum dolore labore. Diam ipsum in et ipsum diam rebum eleifend amet lorem ipsum dolores accusam nonumy.
Column 2
Facilisis elitr et eirmod invidunt sea nam erat sed dolor rebum takimata diam. Facilisis ut dolore. Est amet ut consetetur facilisis et. Amet vero amet. Illum magna stet gubergren voluptua clita gubergren diam labore dolore clita et eos accusam dolor clita in ipsum et. Accusam cum dolore sed sea. Illum et eos no dignissim sit te vulputate. Eros nobis dolor sed ea luptatum aliquyam dolor et elitr erat imperdiet vero et. Eirmod clita feugiat eos clita ea nonumy nisl nobis nisl amet consetetur magna at facilisis dolor. Aliquip voluptua no aliquyam dolor invidunt.
Column 3
Diam nam sanctus ipsum sed consetetur lobortis ullamcorper justo odio duo sanctus vulputate facilisis aliquyam. Amet rebum hendrerit lorem aliquam amet placerat amet erat. Elitr dolor et takimata feugiat sit sea dolore accusam eros dolores lobortis aliquam gubergren ut ipsum. Dignissim et sed dolore erat vel tempor molestie ipsum veniam est molestie vulputate et gubergren et dolor. Et no stet sea amet eu ut est dolore diam voluptua hendrerit gubergren takimata ipsum nonumy. Adipiscing nisl et delenit sit. Sed magna suscipit lorem erat ea dolore nam assum et vero dolores eum lorem nulla sit nostrud minim takimata. Zzril erat liber consetetur rebum labore sit erat gubergren illum dolore laoreet nulla nulla ipsum. Quis nostrud facilisis diam gubergren enim blandit sea gubergren nonumy no diam sed possim ipsum elitr sanctus. Vel sed quod rebum. Amet augue et.
And this paragraph would appear after the floats. It has "clear" both to clear the floats.