SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    Test Your CSS Skills Number 41 - Expanding divs

    CSS - Test Your CSS Skills Number 41 - Expanding divs: Quiz now ended - solution in post #24

    Important:
    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    It's been a while since we had a test your skills CSS quiz and as usual there are no prizes other than the satisfaction of accomplishing an awkward task. The following task is pretty straight forward and should be something that you can complete in your coffee break once you realise the mechanism that needs to be used.

    The task is this:

    Using only CSS (no scripting or expressions allowed but css3 is necessary) the task is two take two divs that occupy 50% of the page and then when clicking on an appropriate link one div will expand to 80% and the other div will shrink to 20% (and vice versa) while both remaining in the flow of the page.

    First take a look at the attachment which show exactly how the elements must look and perform.

    twodivs.png
    (You'll have to click on the image attachment and then click on it again when it opens to get the full size or you won't be able to read it.)

    Note
    also that on the expanded div the "Expand this box" text is removed because it is already expanded.

    The text and links in each column must act as a normal column so make sure the page is working properly when you PM me the solution. Also note that when any other link is clicked (apart from the two "expanding" links) then the layout can return to two divs of 50% (you probably won't be able to stop this happening anyway if you've done it right.)

    I'm pretty lax on rules as I like to see people thinking out of the box and I will award the winner based on either the best solution or the most innovative or indeed the one that matches the requirements exactly.

    Rules

    No scripting allowed but the result must work from IE9+.

    CSS3 allowed

    Vendor extensions allowed if you want to do a nice animated transition from 80% to 20% and vice versa

    Use your own html as required but obviously the cleaner and more compact the code the better.

    To save you a little typing here is the html for the text in the divs but you will need to add html to this to make it work (unless of course you find a better way to do it).

    Code:
    		<div class="box1"><p><a href="#">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p> </div>
    		<div class="box2"><p><a href="#">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p> </div>
    Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

    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
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Starting on it now as i just can't resist finishing it tonight

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    Starting on it now as i just can't resist finishing it tonight
    lol - good luck Chris

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If anything is unclear in my rules or description then just shout and I will clarify.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sent you a PM

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Wow - entries coming in already

    I have correct Entries from CletusSpuckler and Chris.upJohn so well done Guys.

    Guido2004 is close to a solution but struggling on the second part at the moment but I'm sure will have it solved soon.

    The quiz will remain open for a few days to allow other to take part and to test their CSS skills.

    Remember to try for the most compact html you can or alternatively come up with something that you feel is more innovative.

  7. #7
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh this one looks great! will definitely have a go

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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Guido2004 has now sent an updated solution that is fully working. Well done

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yep, I'm definitely having trouble with this one, discovered so many new browser "features" that I never knew about already.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    yep, I'm definitely having trouble with this one, discovered so many new browser "features" that I never knew about already.
    Yes that's half the point of these quizzes as it makes you look outside your normal routines and to try something new.

    I'm sure you'll crack it in the end.

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks to a hint from Paul, I have the solution.
    It's a really good quiz by the way

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well done Timo, You got it

    Anyone else struggling? I'll hand out some clues in a couple of days if you are.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, seems to be a little quiet around here so I will start throwing clues later.

    For those of you that have completed this you may want to try and improve the code you are using and this is the html that I am using in my demo.
    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>
    </head>
    <body>
    <div class="box1">
    		<p><a href="#">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div class="box2">
    		<p><a href="#">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    No extra elements really necessary (although I have removed some attributes like class names and ids etc otherwise that would be too easy).

    As to anyone else trying this the key to this is remain focussed on the target (that's a red herring and a clue).

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ha! I knew your html was like that! and I know how you did it! :P

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well done Timo, I have your second entry and the html is much the same as mine above

    I think this technique could be useful for accessibility as you could also enlarge the text at the same time thus making sections easier to read.

  17. #17
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yes, it would be useful for text size adjustments, though still not as reliable as when done with JavaScript.

    The first thing that I thought was that you could do with pure CSS is a F.A.Q. page with a list of questions, clicking the question expands it and shows the detailed answer, with CSS3 animations and everything lol.
    Though it would probably break my favorite Q or Ctrl+F key combination.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I have another entry form CletusSpuckler which also uses the reduced html. Well done Johan.

    I'll post all the solutions on Wednesday so if anyone else wants to try you have another day or so to do it

  19. #19
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'm back now, so will try and solve this today It's been years since I've tried one of these quizzes.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks Mark, I have your entry and it works fine. Well done and thanks for taking part.

    Anyone else who wants to try you have until Wednesday to get your entries in.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As a teaser (and a big clue) before I post answers tomorrow here's the full html from one of my examples.
    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">
    </style>
    </head>
    
    <body>
    <div id="expand1">
    		<p><a href="#expand1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div  id="expand2">
    		<p><a href="#expand2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    Only css was added and the html remains as shown.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, I've had a crack at this. I was nearly there, but figured that I was missing something fancy in the HTML ... yet I had exactly what you've posted above, so thought I'd better have another look. Attempt submitted.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks Ralph that's working great and the CSS is pretty compact also.

    Well done - I knew you could do it

    I'll publish the entries later today and close the quiz.

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

    Ok, time to wind this up and thanks for all the great entries. Without further ado I will link to some demos that show the technique in various guises so you can see it working before the explanations unfold.

    demo1
    demo2
    demo3
    demo4
    demo5 (accordion)

    As hinted in my clues the solution to this is based on using the CSS3 pseudo class :target selector. This allows you to apply styles to an element that is a target of a fragment identifier (the fragment identifier in a URI comprises a # character followed by an identifier name that matches the value of an id attribute of an element within the document e.g. <a href="#backtotop">To Top</a>). Not only can you target that element you could also target descendants and siblings using suitable css selectors.

    Using this technique we can easily set the with of an element to say 80% when it is the target. The problem in the quiz was that at the same time you need to set the non target element to 20% which was a slight stumbling block for some of you. In fact the solution was pretty easy and instead of having the target apply to the current parent you just set the target higher up the tree and then you can climb back down the tree to find any element you need - almost like the much wished for parent selector.

    In my first example I simply applied an id to the body element to achieve this to save any extra mark up.

    Here's the code from my basic demo that used floats.

    Basic example:
    Demo1
    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">
    .box1, .box2 {
    	width:50%;
    	background:red;
    	float:left;
    	margin:0 -1px 0 0;
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    	min-height:300px;
    }
    .box2 {
    	float:right;
    	margin:0 0 0 -1px;
    	background:blue;
    }
    #expand1:target,#expand2:target div + div { width:80%; }
    #expand1:target a.trigger,#expand2:target div + div a.trigger { display:none }
    #expand1:target + div,#expand2:target div { width:20%;font-size:100% }
    #expand1:target + div a.trigger,#expand2:target div a.trigger { display:block }
    a.trigger {
    	display:block;
    	margin:0 0 10px;
    	font-size:120%;
    	text-align:center;
    }
    a, a:visited { color:#fff }
    p { padding:5px; }
    </style>
    </head>
    
    <body id="expand2">
    <div id="expand1" class="box1">
    		<p><a class="trigger" href="#expand1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div class="box2">
    		<p><a class="trigger" href="#expand2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    As you can see the target is switched to the body tag and then it is a simple matter of climbing back down the html to find the elements you need to change.

    Although this method works it could be improved a lot.

    If instead of floats we use display:table-cell we can have more concise code as the table-cells only one cell needs to get the width and the other cell will shrink as required. If we also combine this with the :not selector to hide the headings we don't need the body id and we can also target the anchor using an attribute selector to match the fragment identifier.

    Demo2
    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">
    #expand1,#expand2 {
    	background:red;
    	display:table-cell;
    	padding:5px;
    }
    #expand2 {background:blue}
    #expand1:target,#expand2:target {width:80%}
    #expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
    #expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }
    a[href="#expand1"],
    a[href="#expand2"]{
    	display:block;
    	margin:0 0 10px;
    	font-size:120%;
    	text-align:center;
    }
    a, a:visited { color:#fff }
    </style>
    </head>
    
    <body>
    <div id="expand1">
    		<p><a href="#expand1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div  id="expand2">
    		<p><a href="#expand2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    In the above the code is much reduced and you only need "#expand1:target,#expand2:target {width:80%}" to effect the changes. The anchor text is hidden by using the :not selector as we target the anchor that is not the current target. We can also target our trigger elements using an attribute selector to set the default.

    e.g.

    Code:
    #expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
    #expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }
    So we set target anchors to display none and non target anchors to display block.

    The above code works well and is very concise with no extra html markup needed. However, there is one slight drawback to this approach and if we wanted to animate the cells we would have a problem because webkit won't animate from an auto width. Therefore for nice effect we need to change the code slightly and apply widths to our elements so that they can animate smoothly.

    It makes no difference to the html but in the CSS we must utilise the :not selector again and apply widths to each element as required. This can be seen in the following demo and code:


    Demo3

    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">
    #expand1,#expand2 {
    	background:red;
    	display:table-cell;
    	padding:5px;
    	width:50%;
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    }
    #expand2 {background:blue}
    #expand1:target,#expand2:target {width:80%}
    #expand1:not(target),#expand2:not(:target) {width:20%}
    #expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
    #expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }
    a[href="#expand1"],
    a[href="#expand2"]{
    	display:block;
    	margin:0 0 10px;
    	font-size:120%;
    	text-align:center;
    }
    a, a:visited { color:#fff }
    </style>
    </head>
    
    <body>
    <div id="expand1">
    		<p><a href="#expand1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div  id="expand2">
    		<p><a href="#expand2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    So there we have it. Two boxes that will stretch and grow as required. Using display:table-cell actually allows us to have as many columns as you like.

    Here is an example with three columns.
    Demo4

    And indeed with a little thought you could easily turn this into a sliding gallery or accordion effect.
    Demo5

    And the winner is..
    Well that's enough of the explanations lets get down to the winners.

    All the entries I received were working so it was hard to choose a winner as there were some interesting variations in the methods used.

    In the end I have called it a tie between CletusSpuckler (Johan) and Ralph.m.

    Johan was first in with the answer but then quickly came back with the more concise html that I wanted. I also awarded Ralph the tied first place because he was the only one to spot that display:table-cell would be very useful in this instance.

    Some of the other entries also used interesting methods and Chris.Upjohn's :checked inputs, nth-child and general sibling version was very interesting (if a little verbose)


    CletusSpuckler's first entry
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>CSS Skills #41</title>
    <style>
    body {
    	margin: 0;
    	padding: 0;
    }
    
    .box1, .box2 {
    	background: #f00;
    	float: left;
    	width: 50%;
    	-moz-transition: all .3s;
    	-ms-transition: all .3s;
    	-o-transition: all .3s;
    	-webkit-transition: all .3s;
    	transition: all .3s;
    }
    
    .box2 {
    	background: #00f;
    }
    
    a {
    	color: #fff;
    }
    
    p {
    	padding: .5em;
    }
    
    a[href="#box1"],
    a[href="#box2"] {
    	display: block;
    	font-size: 1.5em;
    	text-align: center;
    }
    
    #box1:target ~ .box1,
    #box2:target ~ .box2 {
    	width: 80%;
    }
    
    #box1:target ~ .box2,
    #box2:target ~ .box1 {
    	width: 20%;
    }
    
    #box1:target ~ .box1 a[href="#box1"],
    #box2:target ~ .box2 a[href="#box2"] {
    	display: none;
    }
    </style>
    </head>
    
    <body>
    	<div id="box1"></div>
    	<div id="box2"></div>
    	<div class="box1">
    		<p>
    			<a href="#box1">Expand this box</a>
    			Box1 Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    		</p>
    	</div>
    	<div class="box2">
    		<p>
    			<a href="#box2">Expand this box</a>
    			Box2 Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    		</p>
    	</div>
    </body>
    </html>
    Cletus Spucklers Winning entry:

    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">
    body {
    	margin: 0;
    	padding: 0;
    }
    
    .box1, .box2 {
    	background: #f00;
    	float: left;
    	width: 50%;
    	-moz-transition: all .3s;
    	-ms-transition: all .3s;
    	-o-transition: all .3s;
    	-webkit-transition: all .3s;
    	transition: all .3s;
    }
    
    .box2 {
    	background: #00f;
    }
    
    a {
    	color: #fff;
    }
    
    p {
    	padding: .5em;
    }
    
    a[href="#box1"],
    a[href="#box2"] {
    	display: block;
    	font-size: 1.5em;
    	text-align: center;
    }
    
    #box1:target,
    #box2:target .box2 {
    	width: 80%;
    }
    
    #box1:target ~ .box2,
    #box2:target .box1 {
    	width: 20%;
    }
    
    #box1:target a[href="#box1"],
    #box2:target a[href="#box2"] {
    	display: none;
    }
    </style>
    </head>
    <body id="box2">
    <div id="box1" class="box1">
    		<p><a href="#box1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    <div class="box2">
    		<p><a href="#box2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </div>
    </body>
    </html>
    Ralphs Winning entry:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    * {
    	margin: 0;
    	padding: 0;
    }
    #box1, #box2 { display: table-cell; }
    #box1 { background: red; }
    #box2 { background: blue; }
    #box1:target, #box2:target { width: 80%; }
    #box1:target a:first-child, #box2:target a:first-child { display: none; }
    a { color: white; }
    a:first-child {
    	display: block;
    	text-align: center;
    	margin-bottom: 10px;
    }
    p { padding: 10px; }
    </style>
    </head>
    <body>
    <div id="box1">
    		<p> <a href="#box1">Expand this box</a> Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
    </div>
    <div id="box2">
    		<p> <a href="#box2">Expand this box</a> Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
    </div>
    </body>
    </html>
    I alos had correct entries from Guido, yurikolovsky and markBrown which follow here.

    Guido:
    Code:
    <!DOCTYPE HTML>
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test your CSS skills 41</title>
        <style type="text/css">
    #box1 {
    	background-color:red;
    	float: left;
    	width: 50%;
    }
    #box2 {
    	background-color:blue;
    	float: left;
    	width: 50%;
    }
    a { color:white; }
    #box1:target { width: 80%; }
    #box1:target > a { display: none; }
    #box1:target + #box2 { width: 20%; }
    #box2-trigger:target #box1 { width: 20%; }
    #box2-trigger:target #box2 { width: 80%; }
    #box2-trigger:target #box2 > a { display: none; }
    </style>
        </head>
        <body>
    				<div id="box2-trigger">
    						<div id="box1"> <a href="#box1">Expand this box</a>
    								<p> Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
    						</div>
    						<div id="box2"> <a href="#box2-trigger">Expand this box</a>
    								<p> Box2  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
    						</div>
    				</div>
    </body>
    </html>
    Yurikolovsky (first entry):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Quiz 41 - YuriKolovsky</title>
    <style type="text/css">
    a {
    	color:#fff;
    }
    p {
    	padding:5px;
    }
    .box1,
    .box2 {
    	background:red;
    	float:left;
    	width:50%;
    }
    .box2 {
    	background:blue;
    }
    p a:first-child {
    	text-align:center;
    	font-size:large;
    	display:block;
    }
    /*I wonder if :not(S) will also work, will try after sleep*/
    div:target .box2,
    div:target div .box1 {
    	width:20%;
    }
    div:target .box1,
    div:target div .box2 {
    	width:80%;
    }
    
    div:target .box2 a:first-child,
    div:target div .box1 a:first-child {
    	display:none;
    }
    div:target .box1 a:first-child,
    div:target div .box2 a:first-child {
    	display:block;
    }
    </style>
    </head>
    <body>
    		<div id="A">
    		<div id="B">
    		<div class="box1"><p><a href="#A">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#0">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
    		<div class="box2"><p><a href="#B">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#0">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
    		</div>
    		</div>
    </body>
    </html>

    Yurikolovsky (second entry):

    Code:
    <!DOCTYPE html>
    <html  id="A">
    <head>
    <title>CSS Quiz 41 - YuriKolovsky</title>
    <style type="text/css">
    a {
    	color:#fff;
    }
    p {
    	padding:5px;
    }
    .box1,
    .box2 {
    	background:red;
    	float:left;
    	width:50%;
    }
    .box2 {
    	background:blue;
    }
    p a:first-child {
    	text-align:center;
    	font-size:large;
    	display:block;
    }
    
    
    #A:target .box2,
    #B:target .box1 {
    	width:20%;
    }
    #A:target .box1,
    #B:target .box2 {
    	width:80%;
    }
    #A:target .box1 a:first-child,
    #B:target .box2 a:first-child {
    	display:none;
    }
    </style>
    </head>
    <body id="B">
    	<div class="box1"><p><a href="#A">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#0">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
    	<div class="box2"><p><a href="#B">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#0">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
    </body>
    </html>
    Mark.Brown4 entry:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .box1, .box2 {
      float: left;
      width: 50%;
      background: red;
    }
    a { color: #fff }
    .box2 { background: blue }
    .box1 p, .box2 p {
      padding: 20px;
    }
    .box1 a:first-child, .box2 a:first-child {
      display: block;
      text-align: center;
    }
    #make-box1-active-and-shrink-box2:target .box1 { width: 80% }
    #make-box1-active-and-shrink-box2:target .box1 a:first-child { display: none }
    #make-box1-active-and-shrink-box2:target .box2 { width: 20% }
    #make-box2-active-and-shrink-box1:target .box2 { width: 80% }
    #make-box2-active-and-shrink-box1:target .box2 a:first-child { display: none }
    #make-box2-active-and-shrink-box1:target .box1 { width: 20% }
    </style>
    </head>
    <body id="make-box1-active-and-shrink-box2">
    <div id="make-box2-active-and-shrink-box1">
      <div class="box1">
        <p><a href="#make-box1-active-and-shrink-box2">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
      </div>
      <div class="box2">
        <p><a href="#make-box2-active-and-shrink-box1">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and tho other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
      </div>
    </div>
    </body>
    </html>
    Congratulations to all that took part and hope you enjoyed this little quiz which will have real life applications.

  25. #25
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Ah, the thought never crossed my mind to put the id on the body! No need for my extra div.
    Quote Originally Posted by Paul O'B View Post
    hope you enjoyed this little quiz which will have real life applications.
    I did. Can't wait for the next one

    Almost forgot: great work Paul!


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
  •