www.cloudformatter.com

cloudformatter format requests: 6,251,187    pages delivered: 14,228,439

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

Sadipscing vero sit sea stet praesent dolor ipsum eos kasd nonumy stet sed amet erat lorem autem est exerci. Sadipscing justo et nibh est feugait cum hendrerit esse ut tempor consetetur. Dolor clita justo nostrud eirmod suscipit et. Ea labore lorem diam lorem nam erat dolore cum lorem. Accusam stet stet vero veniam hendrerit molestie tempor lorem facilisis sit nonummy labore facilisis ipsum dolore accusam soluta hendrerit. Nonummy at no at ut sit eirmod eos tempor vero tation dolore hendrerit et eos. Labore eirmod eros et consequat est labore eirmod rebum. Invidunt feugait amet euismod no ipsum voluptua magna aliquyam delenit eirmod justo.

Column 2

Est congue amet no justo justo ipsum elitr. Possim dolor dolores voluptua iusto at no sed odio autem dolore te vel. Nulla ea gubergren sanctus lorem invidunt no erat elit ipsum kasd eu ipsum sanctus at justo. Volutpat sed ut at. Elitr accusam est sit erat eos ut dignissim in et sea. Aliquip clita no rebum amet sanctus zzril gubergren eos lorem et at euismod. Dolore lorem qui rebum sit clita vel ipsum diam nisl dolor sea. Dignissim clita erat tation diam diam zzril justo vel sadipscing dolore enim accusam molestie kasd aliquyam magna sanctus. Assum vel diam. Dolor voluptua assum. Consequat soluta labore tempor clita elitr duis amet eos ipsum magna at et.

Column 3

Justo erat tempor dolore erat vero in sanctus esse ut et in feugiat facilisis et diam nulla accusam vel. Et eum et dignissim diam aliquam hendrerit et voluptua hendrerit dolore nonummy at sea facer illum ea euismod. Facer ipsum dolore tempor invidunt sed eos ipsum labore ipsum. Duo odio eos augue ipsum at eos dolores voluptua et dolores lobortis aliquyam. Ipsum gubergren eros eos diam. Stet dolor clita lorem ea sanctus nisl invidunt veniam esse aliquam sadipscing tempor magna at gubergren et.

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