First, it’s noonnope ! Mitică, if you want to use caps, 'cos noonnope is always w/o caps
Second, thanks for a good challenge. Looking at the quiz and the solutions provided, it’s a good qed for showing everyone has its own style
Nice “official” solution and a nice thing to learn from for me. Thaks again. My sincere congratulations to those smart enough to find it: Yurikolovsky, Erik J, Rayzur and Goldfidget, and to Yurikolovsky for being the fastest.
As for me, after relating to tables (CSS and … HTML markup ), I got stuck trying to absolute position everything, trying to use inline, and trying the inline-block Rayzur did.
Even if not for SEO, I’m sure a few additional uses will emerge out of this as a surprising solution for other yet unsolved web dev exercises.
Looking forward to your future quizes, and thanks again for keeping us on the edge and providing us with in-depth CSS insight!
Sorry about that, I’ve edited my last post and I’ll try and remember next time. (I typed in all the usernames from memory so I’ve probably spelled others wrong also so apologies in advance).
Glad you enjoyed the quiz anyway and thanks for your unique entry.
Super quiz, Paul! The solutions are fascinating. Each of these quizzes reminds me that I should actually read the specs, so that I know what CSS can really do. Without knowing the tool properly, it’s hard to know where to start with these challenges. Ah, had we but world enough and time…
I’d put “<table><tr><td>” at the start of the content and “</td>” just before the banner, which with some magic of the HTML parser puts the banner on top!
Bah, so it needs to be valid html? What if I get the spec changed?
Another idea is to use display:table on a wrapping element and display:table-caption on the banner, which puts it on top. Doesn’t work in old IE, though.
I still wonder if there is a proper cross-browser way of doing this, I mean I got it to work in IE6-7 using a bug with percentages, so IN THEORY, this + potential css2 tables (or even maybe the css3 Flexible Box Module…)
anyway, I’m happy that I managed to get into this quiz and not miss it like the last one.
The actual solution is cross browser already The fact that the main layout is absolutely placed is of little concern as long as everything else is inside.
Th css3 flexible box model should do this easily thuogh but we’ll have to wait a long while for full support. The display:table properties in noonope (and zcorpans) suggestions will work for most browsers apart from ie7 and under.
Hi Paul, I originally wrote this of as a bit of fun, but thinking about it further, there’s actually quite a nifty little idea here. We use nested floats to control the source order of a column layout, so why not use these to create horizontal columns.
There are limitations to the technique, I could get 321, 312 and 231 working, but not 213. Still though, given the right design, I can imagine this actually being useful for something one day…
Yes I played around with something similar and I’m sure there is a use for it somewhere
I also had the idea that perhaps the technique could be used to completely reverse the order of ten items so that instead of going from one to ten they went from ten down to one. However I gave up after a while of fiddling around as it didn’t look possible.
As an aside you may be interested in this very old demo where I have added the absolute trick at the end of the routine and a basic 3 column layout can be manipulated into at least 14 variations now.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content Re-organised</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
function toggle(el) {
document.getElementById("swapclass").className = el;
}
//--><!]]></script>
<style type="text/css">
* {
margin:0;
padding:0
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p, h1, h2 {
margin:.5em 0;
padding:0 10px
}
#outer {
width:750px;
margin:20px auto;
border:1px solid #000;
clear:both;
position:relative;
}
.footer{
clear:both;
padding:10px;
border-top:1px solid #000;
}
/* version 0 .........*/
.version0 .col0 {
width:100%;
}
.version0 .col1 {
float:right;
width:100%;
margin-left:-420px;
}
.version0 .col1 p, .version0 .col1 h2 {
margin-left:420px;
}
.version0 .col2 {
width:200px;
float:left;
}
.version0 .col3 {
width:200px;
float:left;
}
/* end */
/* version 1 .........*/
.version1 .col0 {
width:100%;
}
.version1 .col1 {
float:right;
width:100%;
margin-left:-420px;
}
.version1 .col1 p, .version1 .col1 h2 {
margin-left:420px;
}
.version1 .col2 {
width:200px;
float:right;
}
.version1 .col3 {
width:200px;
float:right;
}
/* end */
/* version 2...........*/
.version2 .col1 {
float:right;
width:100%;
margin-left:-320px;
}
.version2 .col1 p, .version2 .col1 h2 {
margin-left:320px;
}
.version2 .col2 {
width:300px;
float:left;
}
.version2 .col3 {
width:100%;
clear:both;
}
/* end */
/* version 3...........*/
.version3 .col0, .version3 .col1, .version3 .col2, .version3 .col3 {
float:left;
width:175px;
margin-right:10px;
}
/* end */
/* version 4...........*/
.version4 .col1 {
float:left;
width:100%;
margin-right:-320px;
}
.version4 .col1 p, .version4 .col1 h2 {
margin-right:320px;
}
.version4 .col2 {
width:300px;
float:right;
}
.version4 .col3 {
width:100%;
clear:both;
}
/* end */
/* version 5...........*/
.version5 .col0, .version5 .col1, .version5 .col2, .version5 .col3 {
width:100%;
}
/* end */
/* version 6...........*/
.version6 .col1 {
float:left;
width:100%;
margin-right:-320px;
}
.version6 .col1 p, .version6 .col1 h2 {
margin-right:320px;
}
.version6 .col2 {
width:300px;
float:right;
}
.version6 .col3 {
width:300px;
float:left;
}
/* end */
/* version 7...........*/
.version7 .col0 {
float:left;
width:49%;
}
.version7 .col1 {
float:right;
width:49%;
}
.version7 .col2 {
width:49%;
float:right;
clear:both
}
.version7 .col3 {
width:49%;
float:left;
}
/* end */
/* version 8...........*/
.version8 .col0 {
float:right;
width:49%;
}
.version8 .col1 {
float:left;
width:49%;
}
.version8 .col2 {
width:49%;
float:left;
clear:both
}
.version8 .col3 {
width:49%;
float:right;
}
/* end */
/* version 9...........*/
.version9 .col0 {
float:right;
width:49%;
}
.version9 .col1 {
float:left;
width:49%;
}
.version9 .col2 {
width:100%;
}
.version9 .col3 {
width:100%;
}
/* end */
/* version 10 .........*/
.version10 .col0 {
width:100%;
}
.version10 .col1 {
float:left;
width:100%;
margin-right:-420px;
}
.version10 .col1 p, .version10 .col1 h2 {
margin-right:420px;
}
.version10 .col2 {
width:200px;
float:right;
}
.version10 .col3 {
width:200px;
float:right;
}
/* end */
/* version 11 .........*/
.version11 h2 {
font-size:120%
}
.version11 .col0 {
width:120px;
float:left;
}
.version11 .col1, .version11 .col2, .version11 .col3 {
float:right;
width:600px;
}
/* end */
/* version 11 .........*/
.version12 h2 {
font-size:120%
}
.version12 .col0 {
width:140px;
float:right;
}
.version12 .col1, .version12 .col2, .version12 .col3 {
float:left;
width:590px;
}
/* end */
.version13 .inner{
position:absolute;
top:100%;
width:100%;
border:1px solid #000;
left:-1px;
}
/* toggle */
ul {
list-style:none;
margin:.5em
}
li {
float:left;
margin:4px;
font-weight:bold;
}
li a {
float:left;
width:22px;
height:20px;
background:#c1daee;
color:#000;
border:#036;
text-align:center;
line-height:20px;
font-size:14px;
text-decoration:none;
border:1px solid #036;
}
li a:hover {
background:#ffffcc
}
</style>
</head>
<body id="swapclass" >
<ul>
<li>Layouts: </li>
<li><a onclick="toggle('version0');return false;" ref="#nogo">1</a></li>
<li><a onclick="toggle('version1');return false;"href="#nogo">2</a></li>
<li><a onclick="toggle('version2');return false;"href="#nogo">3</a></li>
<li><a onclick="toggle('version3');return false;"href="#nogo">4</a></li>
<li><a onclick="toggle('version4');return false;"href="#nogo">5</a></li>
<li><a onclick="toggle('version5');return false;"href="#nogo">6</a></li>
<li><a onclick="toggle('version6');return false;"href="#nogo">7</a></li>
<li><a onclick="toggle('version7');return false;"href="#nogo">8</a></li>
<li><a onclick="toggle('version8');return false;"href="#nogo">9</a></li>
<li><a onclick="toggle('version9');return false;"href="#nogo">10</a></li>
<li><a onclick="toggle('version10');return false;"href="#nogo">11</a></li>
<li><a onclick="toggle('version11');return false;"href="#nogo">12</a></li>
<li><a onclick="toggle('version12');return false;"href="#nogo">13</a></li>
<li><a onclick="toggle('version13');return false;"href="#nogo">14</a></li>
</ul>
<div id="outer">
<div class="inner">
<h1>Content re-organised</h1>
<div class="col0">
<h2>container 1</h2>
<p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
</div>
<div class="col1">
<h2>container 2</h2>
<p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
</div>
<div class="col2">
<h2>container3</h2>
<p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : This is some content in a container : </p>
</div>
<div class="col3">
<h2>container4</h2>
<p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : </p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
<p>This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content</p> </div>
</div>
</body>
</html>
The main solution works fine in Mozilla and IE6. It will also work in IE5 without too much problem either but that is not one of the browsers supported in the quiz anyway. The solution won’t work without electricity though.
Mitică, if you want to use caps, 'cos noonnope is always w/o caps 
), I got stuck trying to absolute position everything, trying to use inline, and trying the inline-block Rayzur did.
Check them out!