CSS - Test Your CSS Skills Number 44 - Re-order content:
Quiz now ended : see solution in post #19
Difficulty Rating : Medium
Time Needed: 30 seconds if you know the answer 
Important:
Don’t post your answers in this thread but PM me with the details instead so that all can have a go.
Ok here’s another little teaser in my series of “Test your skills” quizzes. As with all previous quizzes there are no prizes other than having your name mentioned in the thread. The fun is in taking part and trying to improve your CSS skills or indeed show us how clever you are.
The quiz is purposefully loosely constructed so don’t worry if you miss some points in the instructions as all honest attempts are worthwhile. (I may indeed add or change things as the quiz evolves to make it more difficult or easier depending on how things go).
Flexbox makes the re-ordering of content a cinch as you can move elements visually up and down the page without breaking the flow of the document (unlike absolute positioning which breaks the flow). Your task is to mimic a part of this behaviour but without using flexbox and for it to work in IE8+.
I want you to take the first paragraph of a section and have it placed at the end of that section without disrupting the flow of the document. The page is fluid so you can’t simply use absolute positioning to move things out of the way. Although in another quiz we showed how to put a banner at the end of the html and have it displayed at the top of the page this new quiz differs in that we are only applying the fix at the end of a section and not at the end of the page. This means that there is also content to follow after the element we have moved so absolute positioning is off the menu.
Take a look at the screenshot below which shows what needs to be down.
Using only CSS, no flexbox and no html changes you need to replicate the screenshot above (each of the screenshots has different css to effect the change on a different paragraph). It should be possible to move any of those paragraphs to the end of that section and not disrupt the flow of the document at all.
Once you have managed that task then you might like to try part 2 of the test where I have moved one paragraph to the top and another paragraph to the bottom. You can see that in the screenshot below.
As I mentioned above these work in fluid layouts and you can resize text text without the layout breaking.
I’ll give you a clue in that absolute positioning, relative positioning and margins are no help here to save you wasting time.
The demo has to work in IE8+.
Here is the html and CSS to use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1,h2{text-align:center;color:red}
.wrap,.following {
width:60%;
margin:10px auto 20px;
border:5px solid red;
padding:0;
list-style:none;
padding:20px;
}
.wrap li{
border-bottom:1px solid #999;
padding:10px 0;
}
</style>
</head>
<body>
<h1>Re-order a section so that it is shown at the end </h1>
<ul class="wrap">
<li class="item1">
<h2>Paragraph 1</h2>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<p>Corpus callosum decipherment the sky calls to us billions upon billions Rig Veda, cosmic fugue, radio telescope kindling the energy hidden in matter courage of our questions, ship of the imagination billions upon billions. Trillion explorations vanquish the impossible, astonishment, the only home we've ever known rogue! Intelligent beings at the edge of forever network of wormholes white dwarf light years Sea of Tranquility culture, a still more glorious dawn awaits citizens of distant epochs cosmos? The carbon in our apple pies.</p>
</li>
<li class="item2">
<h2>Paragraph 2</h2>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
</li>
<li class="item3">
<h2>Paragraph 3</h2>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<p>Corpus callosum decipherment the sky calls to us billions upon billions Rig Veda, cosmic fugue, radio telescope kindling the energy hidden in matter courage of our questions, ship of the imagination billions upon billions. Trillion explorations vanquish the impossible, astonishment, the only home we've ever known rogue! Intelligent beings at the edge of forever network of wormholes white dwarf light years Sea of Tranquility culture, a still more glorious dawn awaits citizens of distant epochs cosmos? The carbon in our apple pies.</p>
<p>Science. Dream of the mind's eye made in the interiors of collapsing stars ship of the imagination. Rings of Uranus Rig Veda finite but unbounded globular star cluster cosmic ocean radio telescope, decipherment Flatland. Cambrian explosion astonishment! Made in the interiors of collapsing stars a very small stage in a vast cosmic arena white dwarf a very small stage in a vast cosmic arena, kindling the energy hidden in matter permanence of the stars? Bits of moving fluff, network of wormholes. Permanence of the stars muse about, from which we spring concept of the number one citizens of distant epochs globular star cluster Jean-François Champollion, Flatland kindling the energy hidden in matter?</p>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
</li>
<li class="item4">
<h2>Paragraph 4</h2>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
</li>
<li class="item5">
<h2>Paragraph 5</h2>
<p>Laws of physics cosmic ocean, white dwarf colonies birth brain is the seed of intelligence, Flatland great turbulent clouds, star stuff harvesting star light shores of the cosmic ocean with pretty stories for which there's little good evidence finite but unbounded. Hearts of the stars ship of the imagination Drake Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<p>Corpus callosum decipherment the sky calls to us billions upon billions Rig Veda, cosmic fugue, radio telescope kindling the energy hidden in matter courage of our questions, ship of the imagination billions upon billions. Trillion explorations vanquish the impossible, astonishment, the only home we've ever known rogue! Intelligent beings at the edge of forever network of wormholes white dwarf light years Sea of Tranquility culture, a still more glorious dawn awaits citizens of distant epochs cosmos? The carbon in our apple pies.</p>
</li>
</ul>
<div class="following">
<h3>Following Content</h3>
<p>This is some following content that must remain unaffected by anything that goes on above</p>
</div>
</body>
</html>
General Rules
-
You can change the CSS as much as you like but the answer actually needs very little to be changed
-
No changes to the html at all (apart from the CSS changes mentioned above)
-
No scripting allowed (or needed)
-
No using flexbox
-
Browser support is IE8+ only.
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are. If you need any clarification then just shout but this should be straight forward.
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
)