SOLUTION TIME
Ok, Hope you all had a good Christmas and are now excitedly waiting the answers to this little quiz.
On the surface of it the quiz seemed quite simple but as some of you found out there were a few little obstacles in the way.
The main stumbling block is that the middle fluid column can’t be set with margins or by using overflow:hidden because it would not line up at the left edge. The main trick was to use a 100% wide float for the middle column and then offset the overlapping difference with negative margins to draw everything back onto the page.
Here is an online solution that I have tested on an actual iphone. As mentioned earlier you do need a couple of specific commands for the iphone otherwise it always tries to scale the page to 980px. Apart from that the code is just normal css. (If you have a mac computer you can download an [URL=“http://developer.apple.com/iphone/program/develop.html”]iphone emulator from here.)
Gary was quickest with the first solution followed by Kravvittz but unfortunately both failed in Safari which is a bit of a shame because that’s the browser that the iphone uses.
Therefore the winner to this quiz is yurikolovsky (Timo) as his answer worked as required. Well done Timo 
Thanks to all for taking part and for all the the submissions I received.
My original Code:
<!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=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width = 320" />
<style type="text/css">
@media only screen and (max-device-width: 480px) {
body {
width:320px
}
}
html, body {
margin:0;
padding:0;
}
p {
margin:0 0 1em
}
.col1 {
width:314px;
background:red;
margin:0 0 0 5px;
float:left;
padding:1px 0;
border:1px solid #000;
}
.col2 {
min-width:314px;
float:left;
width:100%;
margin:0 -648px 0 5px;
min-width:934px;
padding:1px 0;
}
.col3 {
width:314px;
margin:0 0 5px 5px;
float:left;
background:blue;
border:1px solid #000;
}
.inner {
background:green;
min-height:0;
margin:0 648px 0 0;
padding:1px 0;
border:1px solid #000;
min-width:314px;
}
#outer {
width:100%;
min-width:320px;
overflow:hidden;
background:#fffccc;
}
.footer,.header {
clear:both;
background:orange;
margin:5px 5px;
border:1px solid #000;
}
h1{text-align:center;margin:0;padding:10px;}
</style>
</head>
<body>
<div id="outer">
<div class="header"><h1>Header</h1></div>
<div class="col1">
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 </p>
</div>
<div class="col2">
<div class="inner">
<p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
</div>
</div>
<div class="col3">
<p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :</p>
</div>
<div class="footer">
<p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
</div>
</div>
</body>
</html>
Yurikolovsky:
<!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">
<meta name="viewport" content="width=320" />
<title>iPhone Columns : Paul remake</title>
<style type="text/css">
/*@media only screen and (max-device-width: 480px) {*/
* {
margin:0;
padding:0;
}
p {
padding-bottom:1em;
}
div {
margin:3px;
border:solid black 1px;
}
#outer {
margin:4px;
min-width:316px;
border:0;
}
.header {
background:orange;
text-align:center;
padding:10px 0;
}
.footer {
background:orange;
clear:left;
}
.col1, .col2, .col3 {
float:left;
width:308px;/*316 - 6*/
}
.col1 {
background:red;
}
.col2 {
border:0;
width:100%;
margin:0 0 0 -632px;/*316 + 316*/
min-width:948px;/*316 + 316 + 316*/
}
.col3 {
background:blue;
}
.inner {
background:green;
margin-left:635px;/*316 + 316 + 3*/
}
/*}*/
</style>
</head>
<body>
<div id="outer">
<div class="header">
<h1>Header</h1>
</div>
<div class="col1">
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 </p>
</div>
<div class="col2">
<div class="inner">
<p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
</div>
</div>
<div class="col3">
<p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) /p>
</div>
<div class="footer">
<p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
</div>
</div>
</body>
</html>
Gary: Fails in Safari
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US"
lang="en-US">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>quiz 31</title>
<style type="text/css">
/*<![CDATA[*/
body, html {
}
#content {
min-width: 316px;
overflow: hidden;
}
#header, #footer {
background-color: pink;
}
#leftcol {
background-color: lightblue;
float: left;
margin: 0 5px;
overflow: hidden;
width: 306px;
}
#rightcol {
background-color: lightyellow;
float: right;
margin: 0 5px;
overflow: hidden;
width: 306px;
}
#centercol {
min-width: 306px;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<h1 id="header">Header</h1>
<div id="content">
<div id="leftcol">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna sem;
tempus quis vehicula in, convallis nec tellus. Pellentesque viverra metus
et odio adipiscing id feugiat nisi cursus. Proin a est felis. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Integer sagittis fringilla odio in pulvinar. Aliquam interdum dignissim
nisl vitae condimentum. Sed condimentum mattis magna. Etiam congue
tincidunt dapibus. Etiam ullamcorper velit sed dolor faucibus volutpat.
Vestibulum id neque ac diam faucibus blandit sollicitudin ut felis. Mauris
risus nibh, condimentum a suscipit nec; hendrerit vitae tellus? Donec in
nunc ut leo mollis mollis faucibus at est. Fusce molestie ullamcorper mi,
id fermentum risus luctus viverra! Maecenas lectus tellus, ultrices eget
feugiat sit amet, auctor quis tortor. Quisque at tortor metus, quis varius
metus? Nullam quis consectetur neque. Suspendisse porttitor faucibus
turpis, vel luctus tellus commodo eget. Integer in magna eget metus cursus
gravida quis vitae neque. Nunc mi dui, porttitor in rutrum ut, cursus sed
velit. Pellentesque nunc neque, vulputate fermentum rutrum adipiscing,
bibendum sed odio!</p>
</div>
<div id="rightcol">
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac
ipsum et nulla consectetur facilisis? Proin sit amet lectus nulla, a
malesuada dolor. Pellentesque facilisis sodales elementum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Aenean dignissim condimentum
sem a accumsan? Vestibulum dapibus pellentesque tellus, sit amet porttitor
orci congue vitae? Sed eu elit erat, et aliquam purus? In hac habitasse
platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In molestie venenatis pulvinar.</p>
</div>
<div id="centercol">
<h2>Center Column</h2>
<p>Nullam fringilla, est adipiscing tincidunt porttitor; lacus mauris
laoreet dui, molestie fringilla nibh est vitae turpis. In volutpat metus et
magna dictum blandit. Suspendisse felis metus, aliquet ac blandit cursus,
posuere aliquet neque. Aenean ut augue et magna adipiscing blandit. In id
augue eget tellus ornare semper non a est. Duis ante massa, bibendum congue
dictum sed, scelerisque at justo. Nam aliquet, nunc sit amet tincidunt
viverra, ligula tortor condimentum mauris; vel convallis mauris ante in
leo. Integer aliquam varius sem vel vestibulum! Nullam varius sollicitudin
velit, nec fermentum tellus commodo ac. Aliquam id ipsum vitae libero
viverra pretium. In eu nibh lacus, non mattis ipsum. Ut sit amet quam in
diam sodales congue. Quisque sodales lacus et elit ultrices eget varius
arcu mattis. Phasellus tempus semper erat, pretium suscipit ante pharetra
et. Vivamus convallis turpis semper turpis tempor semper.</p>
</div>
</div>
<p id="footer">Footer</p>
</body>
</html>
Kravittz: Fails in Safari
<!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=iso-8859-1">
<!-- Created: 2009-12-19 -->
<!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=iso-8859-1">
<title></title>
<style type="text/css">
/* <![CDATA[ */
body {
min-width: 316px;
}
#header, #footer {
background: #FFA500;
clear: both;
}
div.majorCol {
width: 316px;
min-width: 316px;
}
#colOne {
background: #F33;
margin-left: 316px;
float: left;
margin-right: -316px;
position: relative;
}
#colWrap {
min-width: 632px;
position: relative;
float: left;
width: 100%;
margin-left: -316px;
}
#colTwo {
width: auto;
margin: 0;
overflow: hidden;
border-left: 316px solid transparent;
}
#colTwo>.innertube {
background: #282;
overflow: hidden;
min-width: 316px;
}
#colThree {
overflow: hidden;
background: #33F;
}
/* ]]> */
</style>
</head>
<body>
<div id="header"> header
<p>Firefox 3+, IE7+, Opera 8+, Google Chrome 4</p>
</div>
<div id="colWrap">
<div id="colOne" class="majorCol"> column 1
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque
purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu,
scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla
nibh, sollicitudin in, dictum ut, ullamcorper id, mauris.</p>
</div>
<div id="colTwo" class="majorCol">
<div class="innertube"> column 2
<p>Aenean ultricies,
erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi
wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed,
velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla
vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi.
Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas
velit. Nulla feugiat placerat felis.</p>
</div>
</div>
</div>
<div id="colThree" class="majorCol"> column 3
<p>Praesent felis tellus, rutrum et, faucibus
eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros
egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel,
fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis
id, ornare vitae, sapien.</p>
</div>
<div id="footer"> footer </div>
</body>
</html>
Thanks to all those that took part
Look out for the next quiz which I will post in a few days time and unlike other quizzes I am going to give you free reign a bit and want you to come up with some CSS animation in one form or another.
So get your thinking caps on now and see if you can think of something unusual or interesting to display.
To get you in the mood here is an example I knocked up today in about three hours.
Get thinking!!
