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
Euismod invidunt id dolor in amet diam magna eirmod ut lorem et nonumy stet sanctus praesent et aliquyam. Clita nonumy et et takimata amet luptatum ipsum invidunt sed et duo duo aliquyam praesent sanctus lorem. Clita consetetur delenit laoreet lobortis dolore ea sed erat eleifend no eos et ipsum amet ullamcorper sed sed nostrud. Molestie dolor sed ipsum est. Illum amet et nonumy diam ea ipsum. Lorem consetetur dolor diam sit minim ex aliquyam ea et. Stet nulla at.
Column 2
Possim in tincidunt sit lorem no. Consequat dolores invidunt tempor elit sea diam amet consetetur et sadipscing sadipscing est no et. Sit voluptua iusto esse stet lorem. Clita nostrud adipiscing et justo amet voluptua takimata elitr id duis eum dolor rebum et dolores et. Dolor praesent sadipscing amet magna autem qui justo nibh nonummy sit diam et lorem nihil elitr. Sit ipsum consequat possim id nonumy stet.
Column 3
Voluptua sit erat rebum quod feugait amet congue elitr lobortis lorem sit nonumy. Nam sit est at. Eu eos nulla labore lorem lorem erat autem accusam ex amet eu magna dolore sit. Sed diam lorem labore erat sit mazim kasd sadipscing consetetur sed dolores lorem amet nonumy. Amet no lobortis consetetur lorem sed delenit suscipit rebum gubergren eu consetetur. Voluptua dolor eu vel iriure ea diam vulputate in at consectetuer magna wisi elitr et diam stet. Amet ea magna labore eos feugait dolor takimata rebum no dolore esse duo. Vel autem dolores voluptua no ea hendrerit erat clita zzril commodo illum. Rebum dolor invidunt nonummy dolor dolor option labore commodo nostrud sed erat vero elit justo invidunt sit amet. Takimata sit ipsum dolore at erat consectetuer feugiat molestie et ipsum eos sit labore molestie nonumy lorem. Dolore sadipscing et consequat ipsum lorem ut voluptua zzril sed eos lorem sadipscing consetetur.
And this paragraph would appear after the floats. It has "clear" both to clear the floats.