| <!doctype html> |
| <head> |
| <style> |
| div { border:5px solid maroon; -webkit-column-count:2; width:750px; margin: 1em 0 } |
| h2 { -webkit-column-span: all; background-color:#eeeeee } |
| </style> |
| </head> |
| <body> |
| |
| <div> |
| <h2>This is a spanning element at the beginning of the columns block.</h2> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| </div> |
| |
| <div> |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| <h2>This is a spanning element at the end of the columns block.</h2> |
| </div> |
| |
| |
| <div> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| <h2>This is a spanning element in the middle of the columns block.</h2> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| </div> |
| |
| <div> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| <h2 style="display:inline">This is a spanning element with an original display of inline in the middle of the columns block.</h2> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| |
| </div> |
| |
| <div> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| <h2 style="float:left">This element specifies a column span, but it is also floating, so the column-span should be ignored.</h2> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </div> |
| |
| |
| <div> |
| <h2>This is a spanning element at the beginning of the columns block with block siblings.</h2> |
| |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| |
| </div> |
| |
| <div> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| |
| <h2>This is a spanning element at the end of the columns block with block siblings.</h2> |
| </div> |
| |
| <div> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| |
| <h2>This is a spanning element in the middle of the columns block with block siblings.</h2> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. |
| Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| </p> |
| |
| </div> |
| |
| |
| </body> |
| </html> |
