SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

    Test Your CSS Skills Number 44 - Re-order content

    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.

    re-order.png

    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.

    re-order2.png

    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:

    Code:
    <!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

    1) You can change the CSS as much as you like but the answer actually needs very little to be changed

    2) No changes to the html at all (apart from the CSS changes mentioned above)

    3) No scripting allowed (or needed)

    4) No using flexbox

    5) 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:

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Sent mine. Couldn't resist, even on a Saturday evening.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Wow we have a correct entry already from myty

    Well done and I am glad we dragged you away from the TV on a Saturday night.

    I won't reveal the answer for a few days so that others can have a go meanwhile. Who knows, someone may come up with a method I hadn't thought of.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Anyone else got any ideas?

    Don't lurk, don't be shy - have a go

    You know you want to!

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just sent

    absolute positioning, relative positioning and margins are no help here to save you wasting time

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well done tulip-flower you also have a correct entry. Many thanks for taking part.

    Anyone else close or stumped?

    I'll give clues in a few days (not that I haven't given some heavy pointers already).

  7. #7
    SitePoint Member
    Join Date
    Mar 2009
    Location
    Lebanon
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Submitted mine.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well done nightS you have also correctly spotted the technique needed to accomplish this

    Thanks for taking part.

    For those of you struggling with this (and I know there are a few) I'll start giving out clues later in the week.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have another correct entry from Flocke that correctly spotted the right technique. Well done and thanks for taking part.

    We have 4 correct solutions now so for any others that are trying you need to get your foot in the door quick and your head out of the clouds sharpish.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Floodgates have opened now.

    I have two more correct entries one from Dave Maxwell and one from adambuczek.

    Well done to both of you and thanks for taking part.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have another correct entry for jweathe who correctly spotted the technique needed. Well done

    Thanks to all those that have taken part so far.

    For any of you still struggling with this then stop hiding under the table as you need to get a foot in the door right now.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The clues are working

    I now have a correct entry from Ronpat. Well done Ron

    Anyone else

    Answers will be posted tomorrow evening.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have another correct entry from sandeeppathak. Well done and thanks for taking part

    Anyone else before the quiz closes later today?

  14. #14
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    I was going to give it a try tomorrow but I'll see if I can do it this evening when I get from work. I had it on my list of things to look but I completely forgot (maybe because I forgot to read the list )

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by molona View Post
    I was going to give it a try tomorrow but I'll see if I can do it this evening when I get from work. I had it on my list of things to look but I completely forgot (maybe because I forgot to read the list )
    I'll give the answers on Sunday then just to let a few more people try who have been busy this week.

  16. #16
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Sent a fun variation. It does require markup modification, but it works for the part 1 of the quiz. Trying the technique for the part 2 of the quiz though it makes my head spin!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Amazing myty - I would never have thought of doing it that way

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your kindness Paul. But I guess I owe it to the big collective conscience that is the big internet powered brain. I just picked it and it proved to be useful, like many many times before.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

    Solution Time

    Solution Time

    It's time to wrap this quiz up and put it to bed.

    Thanks to all that took part and hope you had some fun along the way. A big mention to you all in order:

    myty
    tulip-flower
    nightS
    d-flocke
    DaveMaxwell
    adambuczek
    jweathe
    ronpat
    sandeeppathak


    All of the above came up with the correct solution so congratulations to all.

    The Solution:

    The solution was very easy (if you knew it) but not so easy if you didn't (obviously)

    All that was needed was to set the wrapper to display:table and then to set the element you wanted to move to the bottom to be display:table-footer-group and the element you want moved to the top to be display:table-header-group. It doesn't matter where the elements are as they will get moved to the appropriate position.

    So the only changes needed to the code I gave was this:

    Code:
    .wrap{display:table}
    .item3{display:table-footer-group}
    .item4{display:table-header-group;}
    .item1{border-top:1px solid #ddd}/* you need to add the border */
    This is the same behaviour as with real tables except that in real tables the table header and footer groups must be first in the table (although they will work if placed later on in the table but won't be valid). CSS doesn't concern itself with this as you can't impart semantics on to an html structure via css.

    All the solutions were based on the above except some people used display:table-row instead and some forgot to put the border back. ( Note that when you use the display:table properties the browser will construct anonymous boxes to complete the table structure so sometimes you can just say display:table-row and the cell and the table automatically get built. It all depends whether you need to apply specific vertical alignment to the cells and then you do need display:table-cell.)

    I won't post all the solution as they are all basically the same but here's my original.
    Code:
    <!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;margin:0;
    }
    .wrap, .following {
    	width:60%;
    	margin:10px auto 20px;
    	border:5px solid red;
    	padding:0;
    	list-style:none;
    	padding:10px 20px;
    }
    .wrap li {
    	border-bottom:1px solid #999;
    	padding:1px 0;
    }
    /*..................*/
    .wrap{display:table}
    .item3{display:table-footer-group}
    .item4{display:table-header-group;}
    .item1{border-top:1px solid #ddd}
    </style>
    </head>
    
    <body>
    <ul class="wrap">
    		<li class="item1">
    				<h2>Paragraph 1</h2>
    				<p>Ship of the imagination billions upon billions. 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>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>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>Hearts of the stars ship of the imagination Drake Equation billions upon billions! Incredible is waiting to be known, muse about!</p>
    		</li>
    		<li class="item5">
    				<h2>Paragraph 5</h2>
    				<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.</p>
    		</li>
    </ul>
    <div class="following">
    		<h3>Following Content</h3>
    		<p>This is some folowing content that must remain unaffected by anything that goes on above</p>
    </div>
    </body>
    </html>
    The winner:

    For this task I am going to award the winner's trophy to myty as he was the first to give me the correct answer (within minutes) but also was the only one that came up with another very interesting solution (although it bent the rules a little).

    Well done myty

    myty's second solution is a work of art but needed an extra wrapper in the html to work. It uses transforms to rotate the layout 3 times. It rotates all the items so that they are upside down and then rotates the last item only so that it is now the right way up but at the bottom, and then with the extra wrapper it rotates all the items above back to where they were.

    Here is myty's alternate solution: enjoy

    Code:
    <!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;
    }
    .wrap,
    .wrap-again,
    .item1 {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    </style>
    </head>
    
    <body>
    <h1>Re-order a section so that it is shown at the end </h1>
    <div class="wrap">
            <div 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>
            </div>
            <div class="wrap-again">
                <div 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>
                </div>
                <div 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>
                </div>
                <div 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>
                </div>
                <div 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>
                </div>
            </div>
    </div>
    <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>
    Once again thanks to all that took part and look out for a new quiz in a couple of weeks.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hehe, nice one, Paul. I suspected from your clues that it might be to do with table display properties, but I obviously didn't stumble on the right ones. O well. Have learned something useful anyway. Myty's second solution is far too darned clever.

  21. #21
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'll give the answers on Sunday then just to let a few more people try who have been busy this week.
    Thanks for I finished quite late on Friday and I decided that my head needed a rest. I read a book instead. Not as interesting but...

  22. #22
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    And thank you Paul for keeping us on our toes!

    Nice quiz, and, if I were to name the 180 transformations for changing the content order, I'd call it the "Rubik's Cube CSS Swap".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •