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
Lorem vel et diam. Tempor sea sit veniam eos consetetur consetetur eum dolor labore consetetur ea accusam clita justo no. Nulla in clita aliquyam feugiat. Tempor magna sanctus feugiat eum diam. Dolore ipsum odio accusam sit labore justo vero magna accusam magna ex rebum. Et lorem zzril delenit at et sit nonumy dolor zzril justo in dolore. Sed gubergren augue. Aliquip voluptua ipsum te sadipscing consequat adipiscing ut diam. Ex esse magna consetetur.
Column 2
Et sed nostrud dolores volutpat clita enim sadipscing sanctus sanctus consequat soluta. Est rebum dolor et labore lorem tempor. In clita ea ea accumsan sed sed lobortis nostrud esse no consequat. Iriure ipsum sea imperdiet kasd hendrerit sed gubergren lobortis tempor rebum dolore consequat ut dolore ea dolore sit consetetur. Nonumy imperdiet ipsum quod ipsum kasd consequat lorem est zzril possim sadipscing sanctus et consetetur kasd diam facilisis. At sadipscing duo eirmod at dolor dolore sit vero et est erat assum et lorem. Et est labore quod sit et eos velit eirmod gubergren et voluptua esse feugait clita augue luptatum suscipit justo. Possim no eos vulputate et adipiscing et ullamcorper amet lorem sit feugiat volutpat sit sed aliquyam diam. Voluptua nisl hendrerit euismod et in eu takimata tation ea dolor gubergren sit aliquyam rebum lorem. Takimata ex vero eos duo dolore et exerci et gubergren et.
Column 3
Consectetuer aliquyam velit elit tempor sit nibh kasd diam eu vero dolor diam ea gubergren diam sed accusam ea. Invidunt lorem nonumy magna nulla accusam elitr laoreet accusam clita iriure takimata ut. Sit dolores volutpat ea veniam aliquyam feugait vulputate delenit duo qui diam. Sit euismod enim sit stet iriure eos lorem rebum elitr nibh ea ea in takimata dolore lorem diam. Iriure esse rebum sadipscing lorem. Vero et sed augue magna et minim assum ipsum eum sit laoreet. Et erat diam et nonumy at amet. Sit eos dolor et amet facilisis sit et et et et ad odio tempor clita et lorem et accusam. Sit praesent kasd kasd ipsum dolore consetetur ullamcorper ut lorem at duo gubergren no adipiscing kasd takimata vel sea.
And this paragraph would appear after the floats. It has "clear" both to clear the floats.