In the spirit of getting the CSS quizzes back on track, perhaps some ideas can be posted in this thread.
Ideas/layouts thought to be impossible (even if it wasn’t working in a lone browser). Give any and all suggestions you can think of, even if you don’t know if a solution is found for it already :).
Server-side CSS. 
Something tried and failed ;).
A bottom aligned float in a fluid height container, it has never been accomplished across all modern browsers.
We all know there is not a bottom value for floats but we have dubbed this attempt as “float bottom”. I have spent many hours on this myself and I have finally given up on it.
What’s needed is a child element that can set it’s height to 100% of the parents unknown/fluid height. That’s how the scripted versions work.
In the code below: Paul O’B had got close using display:table, but it only works in FF3+.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Float bottom in Firfefox 3+ only</title>
<style type="text/css">
h1 {
text-align: center;
}
#wrap {
width: 50%;
height: 1px;
display: table;
margin: 0 auto;
padding: 0 0 0 5px;
border: 2px solid #000;
background: #EEF;
text-align: justify;
}
.push {
float: right;
display: table;
width: 2px;
height: 100%;
background: red;
margin-bottom: -115px;
}
.float {
float: right;
clear: right;
width: 100px;
height: 100px;
margin: 10px 0 10px 10px;
background: lime;
}
p {
margin: 0;
padding: 5px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Float bottom in Firfefox 3+ only</h1>
<div id="wrap">
<div class="push"></div><div class="float">Float</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisl metus, vehicula id, tincidunt at,
aliquet et, sem. Duis pretium justo. Aenean tortor lectus, laoreet et, fermentum quis, volutpat nec, tortor.
Integer et velit in mi viverra sagittis. Cras vitae massa. Praesent porttitor. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam magna, faucibus et, tempus in, viverra
nec, eros. Sed egestas. Mauris adipiscing urna ut nulla. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Cras pharetra accumsan magna. Integer iaculis. Suspendisse potenti.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin odio eros, eleifend
ac, rutrum eget, ullamcorper a, sem. Vestibulum quis magna. Nullam vulputate massa non massa. Fusce lectus
ipsum, placerat vitae, hendrerit nec, interdum eu, odio. Nullam id tortor.</p>
</div>
</body>
</html>
Interesting code :). Thanks for your input Rayzur.
Flying? Teleportation (although visually, no)? Oh you meant code wise?
One thing I’d like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.
~TehYoyo
What other -wise is there? 
One thing I’d like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.
~TehYoyo
Interesting effect/idea :). Although everything would collapse again after hover is done.
Yeah 
Would be a cool effect, I think. More of a flash thing, really. Could lead to a real nice ‘floating in space’ image gallery.
~TehYoyo
>>> What is “impossible” in CSS?
Activate conditional statements depending on browser and/or screen size.
To some extent that’s possible. You can detect IE, and @media queries can be used to target screen sizes.
PHP can interrogate $_SERVER[‘HTTP_USER_AGENT’] and generate a browser specific CSS file but CSS cannot detect which browser is being used (or simulated).
Yes, I should have specified that it’s not CSS that detects the browser, so I should just have mentioned @media queries for detecting viewport dimensions.
You can get pretty close with css3 transitions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.box {
width:100px;
height:100px;
position:absolute;
left:100px;
top:400px;
-webkit-transition-property:all;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 1s;
-moz-transition-property:all;
-moz-transition-duration: 2s;
-moz-transition-delay: 1s;
transition-property:all;
transition-duration: 2s;
transition-delay: 1s;
-webkit-transition:all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.b1 { background:red }
.b2 {
background:green;
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.b3 {
background:yellow;
-moz-transition-delay: 3s;
-webkit-transition-delay: 3s;
transition-delay: 3s;
}
.b4 {
background:blue;
-moz-transition-delay: 4s;
-webkit-transition-delay: 4s;
transition-delay: 4s;
}
.b5 {
background:orange;
-moz-transition-delay: 5s;
-webkit-transition-delay:5s;
transition-delay: 5s;
}
.b6 {
background:teal;
-moz-transition-delay: 6s;
-webkit-transition-delay: 6s;
transition-delay: 6s;
}
.wrap:hover div {
left:500px;
top:100px;
}
.wrap {
position:relative;
width:600px;
height:600px;
border:1px solid #000
}
</style>
</head>
<body>
<div class="wrap">
<div class="box b1">Box1</div>
<div class="box b2">Box2</div>
<div class="box b3">Box3</div>
<div class="box b4">Box4</div>
<div class="box b5">Box5</div>
<div class="box b6">Box6</div>
</div>
</body>
</html>
Wow Paul, a little buggy but that’s pretty savvy :).
And to clarify for everyone, I mean stuff that was thought to be impossible (IE6 dropdown w/o Javascript for example)
Rayzur has provided a good example.
I meant a continual hover effect, like when the red box flies out, the box below it gains the hover…as far as I know, that’s impossible.
~TehYoyo
That demo was a continual hover effect 
Hover long enough and all the boxes fly out.
You can’t move an element out of the way by hovering on the element itself because as soon as it moves it its not hovered any more and takes its place back in the stack. All you get is a flicker effect.
You have to hover on a parent and then make the children move so that way the effect is constant as in my demo.
I did have a very old z-index demo here that I did for an [URL=“http://www.search-this.comI/2007/08/15/give-me-some-zzzzzs/”]old article.
Which was solved in a previous css quiz in case anyone didn’t know
Transform the select element with its options into a horizontal menu. That is, make the list box entries “explode” into independent little options. Having anchors, preferably.
Much like what Google does on Google Translate with the “From” and “To” selects for languages, but it does it with JavaScript, as a progressive enhancement.
I mean, you can make something like this:
[highlight=‘html’]<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<style type=“text/css”>
#sel{
background-color:#FF0;
width:40px;
}
#sel optgroup{
background-color:#CFF;
display:table;
width:20px;
}
#sel optgroup option{
background-color:#deF;
display:table-cell;
width:20px;
}
</style>
</head>
<body>
<select name=“sel” id=“sel”>
<optgroup label=“group1”>
<option value=“1”>1</option>
<option value=“2”>2</option>
<option value=“3”>3</option>
<option value=“4”>4</option>
</optgroup>
<optgroup label=“group2”>
<option value=“5”>5</option>
<option value=“6”>6</option>
<option value=“7”>7</option>
<option value=“8”>8</option>
</optgroup>
</select>
</body>
</html>
but you can't do so much more. You can play with inline-table and such, but it's a far cry from what a classic menu looks like. Nevermind the lack in behavior. Oh, and don't mention lists. I know...