Winners
It was hard to pick a winner and as all the solutions came close but all had minor problems here and there. In the end I decided to award joint winners to Dresden_phoenix (Ray) and teksaver as their answers were the closest. Well done both and many thanks to all who took part.
Here is Dresdens Stage 3 solution:
Stage 3:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap {
border:5px solid transparent;
margin:0 80px;
}
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content .fixed {
background:#f9f9f9;
margin-top:1em;
}
.sidebar, .content .fixed, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
.faq {
list-style: none;
padding: 0;
margin: 0;
}
ul.faq li { display: inline; }
.faq li a {
color:#000;
font-weight: bold;
text-decoration: none;
color: #000
}
.content div:target { position: static; }
.content .answ:target ~ #default, .content .answ {
position: absolute;
left: -999999em
}
.faq li+li a:before { content: ' - '; }
@media screen and (min-width:500px) {
ul.faq li { display: block; }
.content {
float:right;
width:66%;
}
.fixed { position:fixed; }
.sidebar {
width:28%;
float:left;
}
.content .fixed {
margin: 0 20px 0 10px;
max-width: 726px;
}
.faq li a {
display:block;
padding:1em;
}
.faq li a:before, .faq li+li a:before { content: 'View FAQ '; }
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<ul class="faq">
<li><a href="#test1">Tip # 1</a></li>
<li><a href="#test2">Tip # 2</a></li>
<li><a href="#test3">Tip # 3</a></li>
<li><a href="#test4">Tip # 4</a></li>
<li><a href="#test5">Tip # 5</a></li>
<li><a href="#test6">Tip # 6</a></li>
<li><a href="#test7">Tip # 7</a></li>
<li><a href="#test8">Tip # 8</a></li>
<li><a href="#test9">Tip # 9</a></li>
</ul>
</div>
<div class="content">
<div class="fixed">
<div id="test1" class="answ">
<h2>Am FAQ answer #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test2" class="answ">
<h2>Am FAQ answer #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test3" class="answ">
<h2>Am FAQ answer #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test4" class="answ">
<h2>Am FAQ answer #4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test5" class="answ">
<h2>Am FAQ answer #5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test6" class="answ">
<h2>Am FAQ answer #6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test7" class="answ">
<h2>Am FAQ answer #7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test8" class="answ">
<h2>Am FAQ answer #8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test9" class="answ">
<h2>Am FAQ answer #9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="default" >
<h2>Introduction</h2>
<p> Defaul message, something like: Select a tip from FAQ tips list and thetip will be displayed here in a fixed positioned element.. blah blah blah. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Ray used the mobile first approach which allowed IE8 and under to function ok albeit with a mobile experience.
Here are all the other entries but see the notes at the end of this post.
Dresden Stage 2:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap {
border:5px solid transparent;
margin:0 80px;
}
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
width:28%;
float:left;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
float:right;
width:66%;
}
.content .fixed {
background:#f9f9f9;
margin: 0 20px 0 10px;
max-width: 726px;
}
.fixed { position:fixed; }
.sidebar, .content .fixed, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
.faq {
list-style: none;
padding: 0;
margin: 0;
}
.faq li>a {
display:block;
padding:1em;
color:0;
font-weight: bold;
text-decoration: none;
color: #000
}
.content div:target { position: static; background
}
.content .answ:target ~ #default, .content .answ {
position: absolute;
left: -999999em
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<ul class="faq">
<li><a href="#test1">View FAQ # 1</a></li>
<li><a href="#test2">View FAQ # 2</a></li>
<li><a href="#test3">View FAQ # 3</a></li>
<li><a href="#test4">View FAQ # 4</a></li>
<li><a href="#test5">View FAQ # 5</a></li>
<li><a href="#test6">View FAQ # 6</a></li>
<li><a href="#test7">View FAQ # 7</a></li>
<li><a href="#test8">View FAQ # 8</a></li>
<li><a href="#test9">View FAQ # 9</a></li>
</ul>
</div>
<div class="content">
<div class="fixed">
<div id="test1" class="answ">
<h2>Am FAQ answer #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test2" class="answ">
<h2>Am FAQ answer #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test3" class="answ">
<h2>Am FAQ answer #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test4" class="answ">
<h2>Am FAQ answer #4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test5" class="answ">
<h2>Am FAQ answer #5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test6" class="answ">
<h2>Am FAQ answer #6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test7" class="answ">
<h2>Am FAQ answer #7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test8" class="answ">
<h2>Am FAQ answer #8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="test9" class="answ">
<h2>Am FAQ answer #9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="default" >
<h2>Introduction</h2>
<p> Defaul message, something like: Select a tip from FAQ tips list and thetip will be displayed here in a fixed positioned element.. blah blah blah. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Dresden Stage 1:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent; margin:0 80px;
}
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
width:28%;
float:left;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
float:right;
width:66%;
}
.content .fixed{
background:#f9f9f9;
min-height:250px;
margin: 0 20px 0 10px;
max-width: 726px;
}
.fixed { position:fixed; }
.sidebar, .content .fixed, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<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="content">
<div class="fixed">
<h2>This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
</div>
</div>
</body>
</html>
Yurikolovsky - Stage one:
<!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>Fixed positioned element? Sitepoint Quiz 43 - YuriKolovsky - Stage 1 screenshot5</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap, .inner {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
width:28%;
float:left;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
float:right;
width:66%;
background:#f9f9f9;
min-height:250px;
}
.fixed {
position:fixed;
left:0;
width:100%;
}
.sidebar, .content, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<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="fixed">
<div class="inner">
<div class="content">
<h2>This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Yurikolovsky - Stage 2:
<!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>Fixed positioned element? Sitepoint Quiz 43 - YuriKolovsky - Stage 2 - hash</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap, .inner {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
position:relative;
z-index:2;
width:28%;
float:left;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
float:right;
width:66%;
background:#f9f9f9;
min-height:250px;
}
.fixed {
position:fixed;
left:0;
width:100%;
}
.sidebar, .content, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
/*Solution 1: use hash*/
/*NOTE: get rid of the jumping by adding millions of divs or something (Doctor! I think I have divitis!)*/
.inner {
height:300px;
overflow:hidden;
}
.content { margin-bottom:2000px; }
.sidebar a {
padding:15px;
display:block;
border:solid red 1px;
}
/*Solution 2: add selectors on button focus, somehow...*/
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar"> <a href="#a0">Default Question</a> <a href="#a1">Question 1</a> <a href="#a2">Question 2</a> <a href="#a3">Question 3</a> <a href="#a4">Question 4</a> <a href="#a5">Question 5</a> <a href="#a6">Question 6</a> </div>
<div class="fixed">
<div class="inner">
<div class="content" id="a0">
<h2>Default - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a1">
<h2>Answer 1 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a2">
<h2>Answer 2 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a3">
<h2>Answer 3 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a4">
<h2>Answer 4 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a5">
<h2>Answer 5 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content" id="a6">
<h2>Answer 6 - This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
<div class="content"><!--this fixes a bug in IE8 when pressing question 6--></div>
</div>
</div>
</div>
</body>
</html>
Teksaver - Stage 1 - quickfix:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
display:inline-block;
vertical-align:top;
width:28%;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
display:inline-block;
position:fixed;
max-width:770px;
width:66%;
background:#f9f9f9;
min-height:250px;
margin-left:1%;
}
.sidebar, .content, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<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="content">
<div class="fixed">
<h2>This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
</div>
</div>
</body>
</html>
Teksaver Stage 1 part 2:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.sidebar {
display:inline-block;
vertical-align:top;
width:28%;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
display:inline-block;
position:fixed;
max-width:770px;
width:66%;
min-height:250px;
text-align:right;
}
.fixed {
width:40%;
background:#f9f9f9;
float:right;
}
.sidebar, .fixed, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<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="content">
<div class="fixed">
<h2>This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
</div>
</div>
</div>
</body>
</html>
Teksaver - Stage 2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer, .content-wrap {
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.content {
display:inline-block;
position:fixed;
max-width:770px;
width:66%;
min-height:250px;
text-align:right;
}
.fixed {
width:90%;
background:#f9f9f9;
float:right;
}
.sidebar {
display:inline-block;
vertical-align:text-top;
width:28%;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.sidebar ul{
display:table;
width:100%;
border-style:1px solid red;
border-collapse:collapse;
}
.sidebar li{
display:table-row;
vertical-align:middle;
width:100%;
border:1px solid red;
height:80px;
list-style-type:none;
padding-left:10px;
}
.sidebar li:first-child{
display:table-cell;
vertical-align:middle;
color:black;
font-weight:700;
font-size:1.2em;
text-align:center;
border-style:solid;
}
.sidebar li a{
display:table-cell;
vertical-align:middle;
padding-left:1em;
font-weight:500;
text-decoration:none;
color:black;
}
.tips, .tips:target ~ #intro {
display: none;
}
#intro, .tips:target {
display: block;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<ul>
<li>FAQ Tips</li>
<li><a href="#tip1">View FAQ Tip 1</a></li>
<li><a href="#tip2">View FAQ Tip 2</a></li>
<li><a href="#tip3">View FAQ Tip 3</a></li>
<li><a href="#tip4">View FAQ Tip 4</a></li>
<li><a href="#tip5">View FAQ Tip 5</a></li>
<li><a href="#tip6">View FAQ Tip 6</a></li>
<li><a href="#tip7">View FAQ Tip 7</a></li>
<li><a href="#tip8">View FAQ Tip 8</a></li>
<li><a href="#tip9">View FAQ Tip 9</a></li>
<li><a href="#tip10">View FAQ Tip 10</a></li>
</ul>
</div>
<div class="content">
<div class="fixed">
<div id="tip1" class="tips"><h2>Tip 1</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip2" class="tips"><h2>Tip 2</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip3" class="tips"><h2>Tip 3</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip4" class="tips"><h2>Tip 4</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip5" class="tips"><h2>Tip 5</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip6" class="tips"><h2>Tip 6</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip7" class="tips"><h2>Tip 7</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip8" class="tips"><h2>Tip 8</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip9" class="tips"><h2>Tip 9</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip10" class="tips"><h2>Tip 10</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="intro" class="tips"><h2>Introduction</h2><p>Select a tip from the list </p></div>
</div>
</div>
</div>
</body>
</html>
Teksaver -stage 3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px; }
.outer{
padding:10px 25px;
max-width:1100px;
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content {
display:inline-block;
position:fixed;
max-width:770px;
width:66%;
min-height:250px;
text-align:right;
position:static\\9; /* ie 8 hack */
vertical-align:text-top;
}
.fixed {
width:90%;
background:#f9f9f9;
float:right;
}
.sidebar {
display:inline-block;
vertical-align:text-top;
width:28%;
padding:10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.sidebar ul{
display:table;
width:100%;
border-collapse:collapse;
}
.sidebar li{
display:table-row;
vertical-align:middle;
width:100%;
border:1px solid red;
height:80px;
list-style-type:none;
padding-left:10px;
}
.sidebar li:first-child{
display:table-cell;
vertical-align:middle;
color:black;
font-weight:700;
font-size:1.2em;
text-align:center;
border-style:solid;
}
.sidebar li a{
display:table-cell;
vertical-align:middle;
padding-left:1em;
font-weight:500;
text-decoration:none;
color:black;
}
@media screen and (max-width: 640px) {
/* display aside full width */
.sidebar, .sidebar ul {
display:block;
width:100%;
}
.sidebar ul{
padding:0;
margin:0;
text-align:left;
}
.sidebar li, .sidebar li a{
display:inline;
width:100%;
height:auto;
padding:0;
border:none;
}
.sidebar li:first-child{
display:block;
width:100%;
border:none;
padding:0;
}
/* hide "View FAQ and add - */
.sidebar li:after{
content:"-";
}
.sidebar li:first-child:after, .sidebar li:last-child:after{
content:"";
}
.full{
display:none;
}
/* display content bellow user choice */
.content{
width:100%;
padding:10px 1%;
margin-top:10px;
position:static;
background:#f9f9f9;
text-align:justify;
}
.content .fixed{
width:100%;
float:none;
}
}
.tips, .tips:target ~ #intro {
display: none;
}
#intro, .tips:target {
display: block;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<ul>
<li>FAQ Tips</li>
<li><a href="#tip1"><span class="full">View FAQ </span>Tip 1</a></li>
<li><a href="#tip2"><span class="full">View FAQ </span>Tip 2</a></li>
<li><a href="#tip3"><span class="full">View FAQ </span>Tip 3</a></li>
<li><a href="#tip4"><span class="full">View FAQ </span>Tip 4</a></li>
<li><a href="#tip5"><span class="full">View FAQ </span>Tip 5</a></li>
<li><a href="#tip6"><span class="full">View FAQ </span>Tip 6</a></li>
<li><a href="#tip7"><span class="full">View FAQ </span>Tip 7</a></li>
<li><a href="#tip8"><span class="full">View FAQ </span>Tip 8</a></li>
<li><a href="#tip9"><span class="full">View FAQ </span>Tip 9</a></li>
<li><a href="#tip10"><span class="full">View FAQ </span>Tip 10</a></li>
</ul>
</div>
<div class="content">
<div class="fixed">
<div id="tip1" class="tips"><h2>Tip 1</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip2" class="tips"><h2>Tip 2</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip3" class="tips"><h2>Tip 3</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip4" class="tips"><h2>Tip 4</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip5" class="tips"><h2>Tip 5</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip6" class="tips"><h2>Tip 6</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip7" class="tips"><h2>Tip 7</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip8" class="tips"><h2>Tip 8</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip9" class="tips"><h2>Tip 9</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="tip10" class="tips"><h2>Tip 10</h2><p>Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit. </p></div>
<div id="intro" class="tips"><h2>Introduction</h2><p>Select a tip from the list </p></div>
</div>
</div>
</div>
</body>
</html>
Tulip-flower - stage 1:
<!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>Fixed positioned element? Sitepoint Quiz 43</title>
<style type="text/css">
h1, h2, p {
margin:0 0 1em;
padding:0 10px;
}
h1 { text-align:center; }
html, body {
margin:0;
padding:0
}
body { padding:10px 0 20px/*10% 2% 0*/; margin: 0 auto;}
.outer, .content-wrap {
padding:1% 6%;
max-width:1100px;/**/
margin:auto;
zoom:1.0;
}
.outer { border:5px solid red; }
.content-wrap { border:5px solid transparent }
.outer:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden; margin-left:auto; margin-right:auto
}
.sidebar {
width:28%;
float:left;
padding:10px 2% 10px 1%;
background:#f9f9f9;
border-radius:6px;
}
.content {
background:#f9f9f9;
min-height:250px;
position: fixed;
width: 41%;
max-width: 660px;
left:47%;/* margin-right:-45%;*/right:1%
}
.fixed {left:0; right: -13%;}
.sidebar, .content, .outer {
-webkit-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
box-shadow: 10px 1px 5px rgba(50, 50, 50, 0.25);
border-radius:6px;
}
</style>
</head>
<body>
<h1>Fixed right element - but should be responsive!</h1>
<div class="outer">
<div class="sidebar">
<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="content">
<div class="fixed"><!--<div class="content-wrap">-->
<h2>This Block is Fixed positioned</h2>
<p>While I have positioned his fixed element in the correct place to start with it can be seen that if you resize the browser window then it does not stay in place. </p>
<p>Even worse when the page is scrolled vertically the background slides away.</p>
<!--</div>--><!--div class="content">--></div>
</div>
</div>
</body>
</html>
Notes:
Yurikolovskys second entry occasionally disappears in Chrome - probably the bug I saw in my example that was fixed width min-height:100%.
Dresden’s stage 2 doesn’t degrade in ie8.
Dresden’s examples don’t stretch full width if little content.
teksaver - ie8 is fixed and not reachable.
teksaver stage 3 - a little tight at small screens.
Tulip-flower - doesn’t fit close enough to the layout.
Thanks to all for taking part and keep an eye out for the next one in a weeks time.