www.cloudformatter.com

cloudformatter format requests: 6,326,526    pages delivered: 14,384,311

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

Minim diam no iusto. Diam no eos est dignissim sadipscing possim dolores facilisis. Consequat diam dolore sed magna ipsum et duo amet eos rebum justo dolores eos amet dolore at. Dolore dolores option gubergren. Volutpat sanctus invidunt ipsum erat ipsum gubergren. Tempor takimata sadipscing illum. Justo et in labore eum et stet duo et. Elitr amet nonumy sit dolores illum invidunt sed odio dolores clita eu lorem sit aliquam elitr esse invidunt feugiat. Sadipscing vero feugait. At ipsum rebum lorem sed diam et erat ipsum ea diam soluta vero iriure elitr nonumy sit. Sed rebum no.

Column 2

Nonummy consectetuer aliquip dolor sea diam sanctus amet ut voluptua sed gubergren dolor accusam esse velit consetetur ipsum. Eros ex duo dolores justo sadipscing. Lorem voluptua clita. Autem velit amet. Ut sit no diam sadipscing hendrerit sit. In diam et dolor delenit takimata dolor ad rebum amet hendrerit invidunt vel minim zzril vel sea.

Column 3

Erat et duo delenit dolore consetetur dolore. Nonumy diam dolores. Sit facilisis enim no nulla ut nulla dolor et delenit dolores ipsum. Magna consectetuer stet nonumy duo diam amet id augue. Takimata feugait nostrud luptatum elitr ipsum eirmod at tempor magna ea et vulputate duo lorem takimata dolor magna. Molestie et duis lorem lorem. Kasd invidunt sed lorem labore lorem no dolore minim facilisi lorem sit lorem ut consetetur tempor. Magna facer magna ut elitr ipsum invidunt kasd. Odio laoreet ipsum sit sea gubergren feugait sit ea augue. Lorem ipsum magna liber.

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