| <!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 style="display:none"><h2 id="base">This is a spanning element.</h2></div> |
| |
| <div id="one"> |
| 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> |
| |
| <script> |
| var one = document.getElementById('one'); |
| one.insertBefore(document.getElementById('base').cloneNode(true), one.firstChild); |
| </script> |
| |
| <div id="two"> |
| |
| 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> |
| |
| <script> |
| var two = document.getElementById('two'); |
| two.appendChild(document.getElementById('base').cloneNode(true)); |
| </script> |
| |
| <div id="three"> |
| <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. |
| |
| |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| </p> |
| <p id="before"> |
| 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. |
| </p> |
| </div> |
| |
| <script> |
| var three = document.getElementById('three'); |
| three.insertBefore(document.getElementById('base').cloneNode(true), document.getElementById('before')); |
| </script> |
| |
| <div id="four"> |
| 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. |
| |
| <span id="beforetwo"> |
| Lorem</span> 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>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> |
| |
| <script> |
| var four = document.getElementById('four'); |
| four.insertBefore(document.getElementById('base').cloneNode(true), document.getElementById('beforetwo')); |
| </script> |
| |
| <div id="five"> |
| <span>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. |
| |
| <span style="display:block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi.</span> |
| |
| Lorem</span> 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 id="beforethree">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> |
| |
| <script> |
| var five = document.getElementById('five'); |
| five.insertBefore(document.getElementById('base').cloneNode(true), document.getElementById('beforethree')); |
| </script> |
| |
| <div id="six"> |
| <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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. |
| |
| <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> |
| |
| <span id="beforefour">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span style="display:block">Nulla varius enim ac mi.</span> 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.</span> |
| |
| </div> |
| |
| <script> |
| var six = document.getElementById('six'); |
| six.insertBefore(document.getElementById('base').cloneNode(true), document.getElementById('beforefour')); |
| </script> |
| |
| <script> |
| spanners = document.getElementsByTagName('h2'); |
| for (i = 0; i < spanners.length; i++) { |
| spanners[i].style.display = 'none'; |
| } |
| </script> |
| |
| </body> |
| </html> |
