Solution Time.
Well another year over and another quiz done and dusted 
Thanks to all that took part and thanks to all those that watched with interest.
I had entries from the following:
Yurikolovsky, noonnope, ErikJ, Rayzur, Goldfidget and 72dpi.
Yurikolovsky, Erik J, Rayzurand and Goldfidget had the solution I was looking for and filled the criteria successfully.
noonnope had an interesting approach which I will also post but didn’t quite fulfil all the criteria. Ray also had an alternative approach although not working in IE6 but an interesting technique all the same.
It would be hard to pick a winner as entries are similar but as Yurikolovsky was first off the bat with the correct answer I will award first place to him .
Well done Timo (yurikolovsky).
As there are never any losers in my competitions every one else can have joint second and third place 
The solution:
I’ve put up my live example here but the code follows below in case the link goes missing later.
The secret to this quiz was a bit of lateral thinking and it should have become obvious quite soon in that you cannot absolutely position the banner into place because you cannot create the space for the fluid height element to live in without overlapping.
Therefore instead of positioning the banner into position we absolutely position everything else instead!
What!! You can’t do that!
We only need one extra div to surround the existing content apart from the banner (#main in my example) and we set that to be absolutely positioned.
This has the effect that the banner html now sits at the top of the document where we want it but is of course overlapped by the absolute element.
The next step is apply position relative to #outer and create a stacking context for #main. We then simply place #main at top:100% because an absolute element always knows where the bottom of a relative parent is and will always stay at the bottom even where fluid height content is concerned (unfortunately vice versa isn’t true and a relative element never knows where the bottom of a positioned parent is).
The rest is just tidying up and matching borders.
What are the issues of absolutely placing the whole layout?
There are actually very few issues as long as all the remaining content can be kept inside #main. The fact that #main is absolutely positioned has no relevance to the content inside and it will behave as normal.
(There may be an issue in older browsers such as IE6 where you show and hide the content with dynamic elements and IE forgets where the absolute element’s position is but that issue would be present in normal layouts and there are known fixes for this anyway.)
I’ll post the entries below but you might look to through noonnope’s and Ray’s entries for a different take on the issue 
Here is 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0;padding:0}
body{padding:10px 0 0;}
#outer {
position:relative;
width:70%;
margin:auto;
border:1px solid #000;
border-bottom:none;
padding:10px 0 0;
}
#main {
position:absolute;
top:100%;
width:100%;
border:1px solid #000;
border-top:none;
left:-1px;
}
.block, .block2 {
background:yellow;
border:1px solid #000;
margin:10px;
}
.banner {
height:100px;/* this height may change so layout must account for any height*/
line-height:100px;
border:10px solid #000;
font-size:36px;
background:#FF6633;
color:#fff;
text-align:center;
overflow:hidden;
}
.block2 {
background:red;
}
.block p,.content p,.sidebar li {
padding:0 10px;
}
.content {
overflow:hidden;
zoom:1.0;
border:1px solid #000;
margin:10px;
background:green;
color:#fff;
}
.sidebar {
float:left;
width:200px;
background:teal;
color:#fff;
margin:0 10px 10px;
display:inline;
border:1px solid #000;
}
.sidebar ul {
margin:0;
padding:0;
list-style:none
}
.sidebar a {
color:#fff;
text-decoration:none
}
#footer {
clear:both;
background:black;
color:#fff;
padding:10px;
text-align:center;
}
h1 {
margin:10px;
font-size:160%;
text-align:center;
}
h1 span {
display:block;
font-size:60%;
color:red;
}
</style>
</head>
<body>
<div id="outer">
<div id="main">
<div class="block">
<h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
<p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
</div>
<div class="sidebar">
<ul>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
<li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm#)">Side links</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
</div>
<div id="footer">
<p>© copyright (2011) me</p>
</div>
</div>
<div class="block block2">
<div class="banner">Ad Banner Goes here</div>
<p>Start This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : end </p>
</div>
</div>
</body>
</html>
Yurikolovsky:
<!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>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#outer {
width:70%;
margin:auto;
border:1px solid #000;
padding:10px 0 0;
}
.block, .block2 {
background:yellow;
border:1px solid #000;
margin:10px;
}
.banner {
height:100px;/* this height may change so layout must account for any height*/
line-height:100px;
border:10px solid #000;
font-size:36px;
background:#FF6633;
color:#fff;
text-align:center;
}
.block2 {
background:red;
}
.block p, .content p, .sidebar li {
padding:0 10px;
}
.content {
overflow:hidden;
zoom:1.0;/* could have used the height:1% hack in a separate rule if css needs to validate*/
border:1px solid #000;
margin:10px;
background:green;
color:#fff;
}
.sidebar {
float:left;
width:200px;
background:teal;
color:#fff;
margin:0 10px 10px;
display:inline;
border:1px solid #000;
}
.sidebar ul {
margin:0;
padding:0;
list-style:none
}
.sidebar a {
color:#fff;
text-decoration:none
}
#footer {
clear:both;
background:black;
color:#fff;
padding:10px;
text-align:center;
}
h1 {
margin:10px;
font-size:160%;
text-align:center;
}
h1 span {
display:block;
font-size:60%;
color:red;
}
#outer {
position:relative;
border-bottom:0;
}
#content {
position:absolute;
top:100%;
left:0;
width:100%;
border:solid #000 1px;
margin:-1px;
border-top:0;
}
</style>
</head>
<body>
<div id="outer">
<div id="content">
<div class="block">
<h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
<p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
</div>
<div class="sidebar">
<ul>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
</div>
<div id="footer">
<p>© copyright (2011) me</p>
</div>
</div>
<div id="bannerwrap" class="block block2">
<div class="banner">Ad Banner Goes here</div>
<p>Start This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : end </p>
</div>
</div>
</body>
</html>
Erik J :
<!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>Quiz #36 //Erik J</title>
<style type="text/css">
html,
body {
margin:0;
padding:0;
}
#outer {
position:relative;
width: 70%;
margin: auto;
border: 1px solid #000;
padding: 10px 0 0;
}
#inner {
position:absolute;
top:100%;
left:-1px;
width: 100%;
border: 1px solid #000;
padding: 10px 0 0;
}
.block, .block2 {
background: yellow;
border: 1px solid #000;
margin: 10px;
}
.banner {
height: 100px;/* this height may change so layout must account for any height*/
line-height: 100px;
border: 10px solid #000;
font-size: 36px;
background: #FF6633;
color: #fff;
text-align: center;
}
.block2 {
background: red;
}
.block p, .content p, .sidebar li {
padding: 0 10px;
}
.content {
overflow: hidden;
zoom: 1.0;/* could have used the height: 1% hack in a separate rule if css needs to validate*/
border: 1px solid #000;
margin: 10px;
background: green;
color: #fff;
}
.sidebar {
float: left;
width: 200px;
background: teal;
color: #fff;
margin: 0 10px 10px;
display: inline;
border: 1px solid #000;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none
}
.sidebar a {
color: #fff;
text-decoration: none
}
#footer {
clear: both;
background: black;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 10px;
font-size: 160%;
text-align: center;
}
h1 span {
display: block;
font-size: 60%;
color: red;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div class="block">
<h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
<p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
</div>
<div class="sidebar">
<ul>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
</div>
<div id="footer">
<p>© copyright (2011) me</p>
</div>
</div>
<div id="bannerwrap" class="block block2">
<div class="banner">Ad Banner Goes here</div>
<p>Start This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : end </p>
</div>
</div>
</body>
</html>
noonnope (NOT IE6-7):
<!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>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#outer {
width:70%;
margin:auto;
border:1px solid #000;
padding:10px 0 0;
overflow:auto;
}
.block, .block2 {
background:yellow;
border:1px solid #000;
margin:10px;
}
.banner {
height:100px;/* this height may change so layout must account for any height*/
line-height:100px;
border:10px solid #000;
font-size:36px;
background:#FF6633;
color:#fff;
text-align:center;
}
.block2 {
background:red;
}
.block p, .content p, .sidebar li {
padding:0 10px;
}
.content {
overflow:hidden;
zoom:1.0;/* could have used the height:1% hack in a separate rule if css needs to validate*/
border:1px solid #000;
margin:10px;
background:green;
color:#fff;
}
.sidebar {
float:left;
width:200px;
background:teal;
color:#fff;
margin:0 10px 10px;
display:inline;
border:1px solid #000;
}
.sidebar ul {
margin:0;
padding:0;
list-style:none
}
.sidebar a {
color:#fff;
text-decoration:none
}
#footer {
clear:both;
background:black;
color:#fff;
padding:10px;
text-align:center;
}
h1 {
margin:10px;
font-size:160%;
text-align:center;
}
h1 span {
display:block;
font-size:60%;
color:red;
}
#first {
display:table-header-group;
}
#second {
display:table-row;
}
</style>
</head>
<body>
<div id="outer">
<div id="second">
<div class="block">
<h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
<p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
</div>
<div class="sidebar">
<ul>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
</div>
<div id="footer">
<p>© copyright (2011) me</p>
</div>
</div>
<div id="first">
<div id="bannerwrap" class="block block2">
<div class="banner">Ad Banner Goes here</div>
<p>Start This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : end </p>
</div>
</div>
</div>
</body>
</html>
noonnope2 (not valid):
<!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>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#outer {
width:70%;
margin:auto;
border:1px solid #000;
padding:10px 0 0;
overflow:auto;
}
.block, .block2 {
background:yellow;
border:1px solid #000;
margin:10px;
}
.banner {
height:100px;/* this height may change so layout must account for any height*/
line-height:100px;
border:10px solid #000;
font-size:36px;
background:#FF6633;
color:#fff;
text-align:center;
}
.block2 {
background:red;
}
.block p, .content p, .sidebar li {
padding:0 10px;
}
.content {
overflow:hidden;
zoom:1.0;/* could have used the height:1% hack in a separate rule if css needs to validate*/
border:1px solid #000;
margin:10px;
background:green;
color:#fff;
}
.sidebar {
float:left;
width:200px;
background:teal;
color:#fff;
margin:0 10px 10px;
display:inline;
border:1px solid #000;
}
.sidebar ul {
margin:0;
padding:0;
list-style:none
}
.sidebar a {
color:#fff;
text-decoration:none
}
#footer {
clear:both;
background:black;
color:#fff;
padding:10px;
text-align:center;
}
h1 {
margin:10px;
font-size:160%;
text-align:center;
}
h1 span {
display:block;
font-size:60%;
color:red;
}
</style>
</head>
<body>
<div id="outer">
<table>
<tbody>
<tr>
<td><div id="second">
<div class="block">
<h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
<p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
</div>
<div class="sidebar">
<ul>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
<li><a href="#">Side links</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
</div>
<div id="footer">
<p>© copyright (2011) me</p>
</div>
</div></td>
</tr>
</tbody>
<thead>
<tr>
<td><div id="first">
<div id="bannerwrap" class="block block2">
<div class="banner">Ad Banner Goes here</div>
<p>Start This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : This is the last fluid block at the bottom of the html : end </p>
</div>
</div></td>
</tr>
</thead>
</table>
</div>
</body>
</html>
Rayzur (Not IE6): (uses inline-block)
<!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="robots" content="noindex,nofollow">
<title>CSS Quiz #36 - Rayzur</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
h1 {
margin:8px 10px 10px;
padding:5px 0;
font-size:1.5em;
text-align:center;
border:1px solid #000;
background:linen;
}
h1 span {
display:block;
color:red;
font-size:80%;
}
p {margin: 10px;}
/*=== Begin Layout ===*/
#wrap {
width:80%;
margin:10px auto 0;
border:1px solid #000;
border-width:1px 1px 0;
background:#CCC;
word-spacing:-1em;/* html comment to remove node for webkit*/
/*white-space:nowrap;/* The -100% lt/rt margin on #last will work by itself */
/*display:table; /* Webkit chokes on white-space:nowrap; with this added (Makes Opera 1px off on #last block)*/
}
#main, #last {
width:100%;
display:inline-block;
word-spacing:normal;
}
#main {
height:1px;/* THE TRICK -(to keep main content below the #last block. Would use zero, 1px is just for testing)*/
vertical-align:bottom; /* THE TRICK - (to keep main content below the #last block)*/
overflow:visible;/* This is the default anyways, it's just to confirm that visible overflow is needed*/
background:blue;
}
#content { /* fake the #wrap's bg color*/
overflow:hidden;/* IE7 haslayout and uncollapse h1 margins*/
margin:1px -1px 10px;/*-1px to drag borders out lt. and rt. (1px top margin to show #main BG color)*/
border:1px solid #000;
border-top:none; /* fake the extension of #wrap's background*/
background:#CCC; /* fake the extension of #wrap's background*/
}
.block {
margin:10px;
background:#EEF;
border:1px solid #000;
font:1em/1.5 arial;
}
span {font:bold .9em arial; color:red}
code {color:#333; font-family:"courier new";}
#last {
vertical-align:text-bottom;/*<- OPERA FIX!(:top or :bottom works for all but opera, :middle helped opera some)*/
margin:0 -100%; /* THE TRICK -(the -100% lt/rt margins allows #main to drop below the #last block)*/
/*(1px bottom margin to show #main BG color) Opera needs a negative right margin of some sort*/
}
#last .block {
/*min-height:600px; /* Testing opera with greater content in last block*/
margin:10px 10px 2px; /*(2px bottom margin to show #main BG color)*/
background:palegreen;
/*line-height:5.5; /* Testing opera with greater content in last block*/
}
/*IE7 inline-block*/
*+html #main, *+html #last {display:inline;}
/* No DIV SWAP FOR IE6 since "expanding box bug" will not allow for height:0 on #main*/
* html #last {
display:block;
margin:10px 0 0;
padding-bottom:10px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content"><!--fake the wrap's bg color-->
<h1>Fluid Vertical Div Swapping<span>CSS Quiz #36 - Rayzur</span></h1>
<div class="block">
<p>
<b>START <code>#main .content</code></b><br>
<a href="http://www.css-lab.com/demos/inline-block/quiz-36-final.html">Live demo</a> - This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order: </p>
<p>
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
This is the main content that comes first in the source order:
</p>
<p>
<span>Opera problem fixed with <code>vertical-align:text-bottom;</code> on #last div.</span>
<br>Opera is still a little buggy if the last block has more content than the rest of the
page as it adds the extra height to the scrolling distance. At least Opera is cooperating
now without it's fix breaking other browsers.<br><b>END <code>#main .content</code></b>
</p>
</div>
</div>
</div><!--webkit node fix
--><div id="last">
<div class="block">
<p>
<b>Start <code>#last</code> fluid block of the page source</b><br>
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
This is the last fluid block at the bottom of the html :
<br><b>End <code>#last</code> fluid block</b>
</p>
</div>
</div>
</div>
</body>
</html>
72dpi: (not accepted lol :))
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$('.block').prepend($('.block2 p'));
});
</script>
Goldfidget:
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
<style>
.wrapper {position:relative; width:800px;}
.top_content {border:1px solid green;}
.bottom_content_wrapper {position:absolute; bottom:0; height:1px;}
.bottom_content {position:absolute; border:1px solid red;width:800px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="bottom_content_wrapper">
<div class="bottom_content">
<p>Bottom Content</p>
<p>Bottom Content</p>
<p>Bottom Content</p>
<p>Bottom Content</p>
<p>Bottom Content</p>
</div>
</div>
<div class="top_content">
<p>Top Content</p>
<p>Top Content</p>
<p>Top Content</p>
<p>Top Content</p>
<p>Top Content</p>
</div>
</div>
</body>
</html>
Thaks to all that took part and thanks to those that tried different solution as well.
Look out for the next CSS quiz in a week or so (I already have one organised courtesy of Erik J).