Clipboard CSS - Images

Despite being about presentation of text, Clipboard has rules for images, and can shove them left or right as you wish. The default image is centered. On wider viewports, images will slide to the right and left. On viewports narrower than the standard body width of 660px, all images will be centered.

This image is wider than <body>, but resizes to be no wider than the body. The following image is narrower than <body>, and is centered.

Now we have some images set to float right and left, with text surrounding them. These images will never intrude more than 30% of the way into <body>, and will lose their float on viewports narrower than 660px.

Aenean sollicitudin sagittis tellus, sit amet feugiat urna ultricies sit amet. Aenean risus justo, tristique non condimentum eget, cursus a mauris. Sed pulvinar volutpat tempor. Nulla vitae molestie arcu. Pellentesque pharetra, ligula quis commodo luctus, neque mauris blandit sapien, sed dignissim tortor augue id magna. Ut ac varius erat.

Praesent orci nisi, laoreet vitae tempor id, consectetur non mi. Donec eu hendrerit diam. Aliquam erat volutpat. Fusce auctor lobortis semper. Fusce ut dignissim nisi. Aenean sit amet augue nec justo fringilla laoreet nec vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eget condimentum nisi. Phasellus fermentum quam faucibus elementum facilisis.

Fusce in erat est. Sed in arcu iaculis erat tristique pulvinar vitae quis orci. Integer lobortis nulla id nulla dictum blandit. Ut lectus orci, dictum in porta ac, porta ut risus. Nunc placerat dapibus consequat. Nulla cursus in nulla quis congue. Phasellus vel ullamcorper metus. Sed laoreet ante in sapien accumsan aliquet. Donec egestas at ipsum at facilisis. Nullam non ipsum porta, convallis lorem vitae, tristique risus. Pellentesque fermentum vulputate felis id bibendum. Sed neque lectus, viverra at enim eget, congue tempus tortor. Etiam elit urna, consectetur a tortor in, sollicitudin rutrum dolor. Pellentesque ornare rhoncus vulputate. Vivamus eget lorem convallis, dignissim nisl et, rhoncus leo.

Mauris massa odio, suscipit eget justo sit amet, imperdiet lobortis neque. Nullam iaculis orci id consectetur rutrum. Curabitur placerat orci eu tellus volutpat suscipit. Vivamus mattis libero non augue faucibus, et volutpat nisl posuere. Suspendisse potenti. Maecenas non leo ultricies, gravida urna eu, interdum nibh. Nunc eu posuere arcu. Nullam est massa, aliquam lacinia interdum sit amet, lobortis vel purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dictum nisi eros, ut ornare ipsum mattis sed. Ut eget lacinia nunc, sit amet mattis libero. Nullam metus est, viverra in blandit sed, interdum nec felis.