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
<!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
<!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.
#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:
[URL=“http://www.pmob.co.uk/temp/transition-2boxes-stretch4.htm”]
Demo3
<!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 [B]CletusSpuckler /B 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
<!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:
<!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:
<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:
<!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):
<!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):
<!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:
<!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.