SitePoint Sponsor

User Tag List

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

    Test Your CSS Skills Number 43 - Fixed element in responsive layout

    CSS - Test Your CSS Skills Number 43 - Fixed element in responsive layout:
    Quiz now ended - see solution in post #14

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


    After a suitable break its time for another of my css "Test your skills" quizzes. As with all previous quizzes there are no prizes other than having your name mentioned in the thread. The fun is in taking part and trying to improve your CSS skills or indeed show us how clever you are.

    The quiz is purposefully loosely constructed so don't worry if you miss some points in the instructions as all honest attempts are worthwhile. (I may indeed add or change things as the quiz evolves to make it more difficult or easier depending on how things go).

    The quiz is mainly concerned with created a fixed position block at the top of a right column in a responsive (fluid) layout.

    I have broken this quiz in to 3 stages to allow all levels of ability to have a go.

    Stage 1

    Simply create a fixed position element that stays put in the right column when the page is scrolled but will also adapt to the width of the layout if the viewport is resized. The layout has a max-width (where it becomes centred) but otherwise is fluid throughout the range.

    First take a look at the attached image "q43-screenshot-stage1" which shows exactly how the elements must look and perform and contains a number of screenshots.

    In the first part of the screenshot (screenshot1) you can see that the text in the right column has flowed out of the layout and then when the page has scrolled the background has also scrolled away as shown in the section marked screenshot2.

    If you then look down to the sections named screenshot 3 & screenshot 4 you can see how the layout is supposed to perform and the task that you need to complete.

    There is a quick fix (5 mins or less) that will restrict the layout as required (requires CSS changes only) and should easily be solved quite quickly unless you are an absolute beginner. However, if you find that easy then you should attempt what is shown in screenshot5 where the width of the right column could be changed and still allowed to work without changing everything specific to that width (requires css and html changes).

    There may be many answers to this and even some I hadn't thought of.

    As I said don't get too hung up on rules as long as you think your version is doing what was wanted.

    Here's some basic html to get you started but feel free to change everything except the max-width of the container and fluid nature of the layout.

    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>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 {
    	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; }
    .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>
    The above task should work in at least IE8+.

    Stage 2

    Stage 2 is about turning the above effect into something useful.

    I want you to construct a FAQ list in the fluid left column that when clicked will show a TIP in the right column fixed element. This is done with CSS only (no scripts).

    If you look at the attachment "q43-screenshot-stage2and3" then it should all be clear what is required.

    This may be slightly old ground to some of you but there are a couple of little sticking points.

    a) There should be a default message displayed in the right column on page load which is then hidden when the tip is shown.

    b) Only modern browser support is required for this section of the task but In browsers that don't understand this modern CSS all the tips should be displayed by default so that they are still accessible (even in ie6).

    Stage 3

    Did I mention responsive?

    The last task is simply to make the layout usable for small device screens (say 600px or less or whatever you want). If you look at screenshot 4 in "q43-screenshot-stage2and3" you can see the small screen display that I want.

    The tips are no longer fixed positioned and the columns are reduced to one column but the tips still show when clicked. The display is much simplified and easier to manage on mobile. Fixed position doesn't work well on mobile so its best to remove it for small screens.

    Media queries will be required for this stage.

    General Rules

    1) You can change css and html as you think fit but the layout must maintain the max-width on the layout and the columns should be fluid width.

    2) No scripting allowed

    3) Browser support for stage 1 is IE8+ only but stage 2 and 3 are for modern browsers only but degrade nicely for older browsers.


    Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are. If you need any clarification then just shout but this should be straight forward.

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

    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images
    Last edited by Paul O'B; Oct 13, 2013 at 07:42.

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Why must you post it on Sunday evening!
    Now I am going to spend the night thinking about this haha

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Why must you post it on Sunday evening!
    Now I am going to spend the night thinking about this haha
    Hi Timo, did I wake you up ? I'm sure you won't lose sleep over it.

  4. #4
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    No you didn't wake me up, my timezone is pretty much the same one as yours (Although you did pull me out of hibernation)

    I managed to do Stage 1 Screenshot 5, but I am failing to achieve Screenshot 4 without modifying the HTML. You said it was easier than Screenshot 5!

    Also, where did you get the absolutely crazy text? hahaha

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

    That was quick

    I got your entry for stage 1 and it works fine. Well done

    I also got your entry for stage2 but I notice a problem in Chrome in that the background disappears (or is only half drawn) on the fixed element when you open and close the window and click other entries. As Chrome is the largest browser now that issue really needs to be fixed.

    Otherwise it is doing what I asked for.

    As to the method to use I did give a clue in that browsers that don't support the method should be given an alternative method so you need to look for something that works in modern browsers and not in older browsers. I'm not saying the original approach can't be made to work but just that I didn't see a fix for it.

    Quote Originally Posted by YuriKolovsky View Post
    where did you get the absolutely crazy text? hahaha

    From here
    .

    For any others trying stage 2 of the quiz please test your entry in the latest versions of chrome and open and close the browser window and click the tips a few times. It's an intermittent bug which needs to be eliminated and if you are seeing the bug then you probably need to drop that method and try something else.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have entries from Dresden_phoenix (Ray) for all three stages that mostly satisfy the requirements. Well done Ray and thanks for having a go.

    For those of you still thinking about having a go but think it to complex then just try the first part of stage 1 (quick fix) as is is only a couple of extra lines of css and no html changes to get it working.

    For Stages 2 and 3 you can go to town though and add animation if you want as the tips are revealed.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Things are a bit quiet in here but I'll let this run for another week as a couple of people have expressed an interest in having a go.

    If anyone else wants to have a go but is stuck or needs a clue then shout and I'll give some clues to get you started .

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have an entry from "teksaver" for the quick fix part of the quiz which is doing what was asked so well done teksaver.

    Anyone else have any ideas or if you are stuck on something I may start throwing clues around.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Teksaver has sent me an entry for the second part of stage 1 (screenshot5) which does what was asked for. Well done

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Teksaver is working hard and has now completed Stage 2

    Well done and thanks for taking part!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Teksaver has now completed stage3 of this task so well done and thanks for having a go.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the entry from tulip-flower but it's not quite there yet

    Thanks for trying though and I'm sure you will solve it soon.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Tulip-flower has now completed the first stage well done and thanks for trying

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

    Solution Time

    Solution Time

    Ok, time to wrap this up and thanks to all that have taken part (Yurikolovsky, Dresden_phoenix, teksaver and tulip-flower).

    Here is a link to my full solution so you can compare and test with your own ideas. This isn't the only way to do this and there may indeed be better solutions around.
    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>CSS tips with the tip fixed positioned in a fluid layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
    	border:5px solid red; 
    }
    .outer:after {
    	content:".";
    	clear:both;
    	display:block;
    	height:0;
    	visibility:hidden;
    }
    .fixed-wrapper:not(:target) {/* this rule only applied if the browser understands target */
    	position:fixed;
    	left:0;
    	right:0;
    	min-height:100%;/* safari bug */
    }
    .content-wrap:not(:target) {
    	padding:10px 25px;
    	max-width:1100px;
    	margin:auto;
    	zoom:1.0;
     border:5px solid transparent;
    }
    .sidebar {
    	width:28%;
    	float:left;
    	padding:10px 1%;
    	min-height:1000px;/* test for scroll */
    	background:#f9f9f9;
    	list-style:none;
    	border-radius:6px;
    	position:relative;
    	z-index:2;
    }
    .sidebar li {
    	border:1px solid red;
    	margin-bottom:-1px;
    	zoom:1.0;
    }
    .sidebar li:first-child { border-radius:6px 6px 0 0 }
    .sidebar li:last-child { border-radius: 0 0 6px 6px }
    .sidebar li:last-child a { border-radius: 0 0 6px 6px }
    * html .sidebar li {
    	float:left;
    	clear:left;
    	width:98%
    }
    *+ html .sidebar li {
    	float:left;
    	clear:left;
    	width:98%
    }
    .sidebar li a {
    	padding:20px 10px;
    	display:block;
    	color:#000;
    	text-decoration:none;
    	zoom:1.0;
    	font-weight:bold;
    	text-shadow: 5px 4px 14px rgba(213, 53, 95, 0.8);
    	-moz-transition: all .5s;
    	-webkit-transition: all .5s;
    	transition:all .5s;
    }
    .sidebar li a:visited { color:#000 }
    .sidebar li a:hover, .sidebar li a:focus {
    	background:#999;
    	color:#fff
    }
    .content {
    	float:right;
    	width:66%;
    	background:#f9f9f9;
    	position:relative;
    }
    .tip:not(:target) {
    	visibility:hidden;
    	opacity:0;
    	height:0;
    	overflow:hidden;
    	padding:0;
    	max-height:0;
    }
    .tip, .intro { padding:30px 10px; }
    .intro {
    	display:block;
    	z-index:2;
    }
    .tip h2, .intro h2 {
    	margin:0 0 1em;
    	text-shadow: 1px 1px 1px rgba(150, 150, 150, .7);
    }
    .tip {
    	background:#f9f9f9;
    	position:relative;
    	z-index:3;
    	border-radius:6px;
    	-moz-transition:max-height 1.5s, opacity 2.5s;
    	-webkit-transition:max-height 1.5s, opacity 2.5s;
    	transition: max-height 1.5s, opacity 2.5s;
    }
    .tip:target {
    	visibility:visible;
    	opacity:1;
    	height:auto;
    	max-height:999px;
    	overflow:visible;
    	padding: 30px 10px;
    }
    .tip:target ~ .intro {
     display:none
    }
    .tip h2+ p {
    	font-weight:bold;
    	color:red;
    }
    .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;
    }
    .faq { display:block }
    .faq h2 {
    	margin:0;
    	padding:.5em 0;
    	text-align:center;
    }
    @media (max-width: 500px) {
    h1, h2 { font-size:120% }
    .outer { margin:0 20px }
    .outer .content-wrap, .outer .fixed-wrapper {
    	position:static;
    	padding:0;
    	max-width:100%;
    	border:none;
    }
    .content {
    	float:none;
    	width:auto;
    }
    .sidebar {
    	float:none;
    	width:auto;
    	height:auto;
    	min-height:0;
    	padding:10px 20px
    }
    .sidebar span { display:none }
    .sidebar li, .sidebar li a {
    	display:inline-block;
    	border:none;
    	padding:0;
    	text-shadow:none;
    }
    .sidebar li.faq { display:block }
    .sidebar li a:after { content:" - " }
    .sidebar li:last-child a:after { content:" " }
    }
    </style>
    </head>
    
    <body>
    <h1>CSS tips with the tip fixed positioned in a fluid layout</h1>
    <div class="outer">
    		<ul class="sidebar">
    				<li class="faq">
    						<h2>CSS Tips</h2>
    				</li>
    				<li><a href="#tip1"><span>View CSS</span> Tip 1</a></li>
    				<li><a href="#tip2"><span>View CSS</span> Tip 2</a></li>
    				<li><a href="#tip3"><span>View CSS</span> Tip 3</a></li>
    				<li><a href="#tip4"><span>View CSS</span> Tip 4</a></li>
    				<li><a href="#tip5"><span>View CSS</span> Tip 5</a></li>
    				<li><a href="#tip6"><span>View CSS</span> Tip 6</a></li>
    				<li><a href="#tip7"><span>View CSS</span> Tip 7</a></li>
    				<li><a href="#tip8"><span>View CSS</span> Tip 8</a></li>
    				<li><a href="#tip9"><span>View CSS</span> Tip 9</a></li>
    				<li><a href="#tip10"><span>View CSS</span> Tip 10</a></li>
    				<li><a href="#tip11"><span>View CSS</span> Tip 11</a></li>
    				<li><a href="#tip12"><span>View CSS</span> Tip 12</a></li>
    				<li><a href="#tip13"><span>View CSS</span> Tip 13</a></li>
    				<li><a href="#tip14"><span>View CSS</span> Tip 14</a></li>
    		</ul>
    		<div class="fixed-wrapper">
    				<div class="content-wrap">
    						<div class="content">
    								<div id="tip1" class="tip">
    										<h2>CSS Tip 1</h2>
    										<p>CSS isn't just for Christmas</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip2" class="tip">
    										<h2>CSS Tip 2</h2>
    										<p>If you get a "user" error then replace user and press any key to continue</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    								</div>
    								<div id="tip3" class="tip">
    										<h2>CSS Tip 3</h2>
    										<p>Don't hide your overflow when you want someone to see it.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip4" class="tip">
    										<h2>CSS Tip 4</h2>
    										<p>CSS isn't really suitable for you - take up another hobby instead.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip5" class="tip">
    										<h2>CSS Tip 5</h2>
    										<p>If the data is tabular then "<strong>USE A TABLE</strong>."</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    								</div>
    								<div id="tip6" class="tip">
    										<h2>CSS Tip 6</h2>
    										<p>Visibility:hidden means the element is still there taking up space but you just can't see it. Display:none means the element is not there at all.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip7" class="tip">
    										<h2>CSS Tip 7</h2>
    										<p>Don't forget to validate your CSS.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip8" class="tip">
    										<h2>CSS Tip 8</h2>
    										<p>CSS3 is not HTML5</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip9" class="tip">
    										<h2>CSS Tip 9</h2>
    										<p>To make a smooth transition from  old school table layout just use the following code <strong>"table {transition-duration: 5years ease-in}"</strong>.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip10" class="tip">
    										<h2>CSS Tip 10</h2>
    										<p>Don't apply heights to fluid content</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip11" class="tip">
    										<h2>CSS Tip 11</h2>
    										<p>Clear your floats</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    								</div>
    								<div id="tip12" class="tip">
    										<h2>CSS Tip 12</h2>
    										<p>Contain your floats</p>
    										<p>Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip13" class="tip">
    										<h2>CSS Tip 13</h2>
    										<p>Use inline-block instead of floats for aligning variable height elements horizontally when they need to wrap at the end of a line.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie, tempor euismod felis adipiscing. Nullam ultrices in mauris vitae blandit. Proin pharetra suscipit eleifend. Nunc dictum leo accumsan, porttitor elit nec, bibendum quam. Vivamus felis justo, ornare at diam nec.</p>
    								</div>
    								<div id="tip14" class="tip">
    										<h2>CSS Tip 14</h2>
    										<p>Get ahead of the game and start using CSS99</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ipsum sit amet augue molestie.</p>
    										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    								</div>
    								<div class="intro">
    										<h2>Introduction</h2>
    										<p>Select a tip from the <strong>CSS Tips </strong>list and have the tip displayed here in a fixed positioned element that will adapt to fluid widths.</p>
    								</div>
    						</div>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    Although it seemed relatively simple at first there were a few pitfalls that needed to be overcome on the way.

    Stage 1:

    The quick fix to stage one was to move the right column background to the div that holds the tip rather than the content container and use a combination of max-width and width to hold the layout within the confines of the parent.

    Code:
    .fixed {
    	position:fixed;
    	z-index:2;
    	background:#f9f9f9;
    	max-width:720px;
    	width:60%;
    }
    A number of the entries failed to cater for when there was a little amount of content and the right column was shrink wrapping the text which was not a good effect. You needed to push the element wide to start with but contained within a maximum width that the layout allowed.

    A more stable solution for stage one was to create a fixed positioned wrapper that matched exactly the size of the layout and then you can simply float the right column with the same dimensions as in the non fixed layout. Fixed positioned elements are always relative to the viewport so the solution is to add two wrappers to the right content column and set it the first to be fixed positioned ans the inner one to mimic the original layout. This meant adding some extra elements so that we first create the fixed positioning at viewport width and then inside the fixed positioned element we just mirror the original layout dimensions. See my example above for the full code:

    This could in fact have been done with only one extra wrapper but IE11 and under all exhibit a nasty bug and when you say.
    Code:
    .element{
    position:fixed;
    right:0;
    left:0;
    max-width:1100px;
    margin:auto;
    }
    The above should centre the fixed element but IE gets this wrong and leaves it left aligned. It seems IE will only center with a fixed width but this is incorrect behaviour as the max-width should works also. That's why another wrapper is needed to create the centred layout inside the fixed positioned wrapper.

    Stage 2.: Hide and reveal the tips.

    There are two ways you could approach this and the first is to use overflow:hidden on the right column and then use a fragment identifier (#idname) to travel to the link which is inside the overflow: hidden container. If you space the elements out with a giant bottom margin then you can just get the tip that you want scrolled into view. This is an old technique and will work back to ie6 and beyond but relies on the fact that you need a fixed height on the container so that you can hide the overflow and so is not the best choice for this test although it does work. There is also an issue in a fluid layout that the layout may extend further than the margin you have applied and thus content will move around awkwardly.

    A more modern approach is to use :target pseudo class and style the element when it is a target (i.e. reached via a fragment identifier (#idname)). When the element is a target you can apply rules to it to make it visible. This works well but the only downside is that when the element is no longer a target it will disappear which will happen only when you navigate to another link so is not really a big problem.

    To avoid harming older browsers we can initially hide the tips using :target itself so only browsers that understand target will obey this and other browsers will get a normal list of tips.

    Code:
    .tip:not(:target) {
    	visibility:hidden;
    	opacity:0;
    	height:0;
    	overflow:hidden;
    	padding:0;
    	max-height:0;
    }
    .tip:target {
    	visibility:visible;
    	opacity:1;
    	height:auto;
    	max-height:999px;
    	overflow:visible;
    	padding: 30px 10px;
    }
    I used the :not selector combined with :target so that only browsers that understand this css will hide the divs.

    I did the same for the fixed positioned layout so that older browsers just get a normal layout (and fixed a safari bug on the way).

    Code:
    .fixed-wrapper:not(:target) {/* this rule only applied if the browser understands target */
    	position:fixed;
    	left:0;
    	right:0;
    	min-height:100%;/* safari bug */
    }
    .content-wrap:not(:target) {
    	padding:10px 25px;
    	max-width:1100px;
    	margin:auto;
    	zoom:1.0;
     border:5px solid transparent;
    }
    Note that should .content-wrap become a target then you will lose the fixed positioning so apply this with care in a real situation.

    The default tip is simply a normal element that isn't hidden with the rules above and simply gets hidden using the general sibling selector "~" when a tip is targeted.

    e.g.
    Code:
    .tip:target ~ .intro {
     display:none
    }
    That means that the intro element must be last in the html of that section and be a sibling.

    I also added some fade and height animation to the tip so that it becomes more obvious it has been changed.

    Stage 3


    Stage 3 was all about using media queries and adjusting things to fit. There was nothing special going on here but you do need to think about how you can alter your content for smaller screens. I added a couple of hooks into the content so I could hide certain things at the smaller width screens.

    e.g. I added a span here around some text.

    Code:
    <li><a href="#tip1"><span>View CSS</span> Tip 1</a></li>
    At smaller screens I hide that span just leaving the word "Tip 1" visible and saving on screens space.

    The rest of the code is just making sure everything fits and over-riding anything that doesn't fit. Change two columns into one column and adjust dimensions as necessary. View the source for the full details.

    I used a max-width media query to target smaller browsers but of course ie8 and under don't understand them so they will just get the normal layout (which is fine in this case). I could have used the mobile first approach but that would leave ie8 and under with the mobile view which I didn't think was warranted for this example as the site works fine at expanded size on ie8 and under.

    In the next post I will post all the solutions I received and nominate a winner.
    Last edited by Paul O'B; Oct 13, 2013 at 07:53.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:
    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>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:
    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>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:

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

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

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

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

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I tried to solve it all week and could not figure it out, funnily enough I have encountered :target in the past, but I never even came to me that it exists when looking for the solution.
    Just shows that I need to stop sitting in the backend and return to the frontend every now and then.

    Thank you for taking the time to organize all of this, shame I didn't manage to solve it in time.

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

    New quiz posted



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
  •