CSS - Test Your CSS Skills Number 36 - Content First

HTML & CSS
1

Quiz now ended. Solution in post #18 below.

As some of you may find yourself with a little spare time over the holiday break I thought you might like to have a go at a little CSS quiz that I have prepared.

This quiz is based on a question we see often in the forum and the answer has always been “No, You can’t do that as it’s not possible with CSS”. As soon as I see a reply like that its like a red rag to a bull for me and I start thinking how the effect could be accomplished (irrespective of whether it’s good idea or not).

The task this week is to take a fluid height element (such as a banner and various ads) that sits near the end of the html and make it show first when the page is displayed. This is easy to accomplish if the element is a fixed height but generally thought to be impossible if the element is a fluid or dynamic height.

Disclaimer:I’ve always told people that moving content around just for SEO purposes is never usually a good idea but tests have shown that having good content higher in the page does have a small beneficial effect for SEO and Matt Cutts of Google does allude to this as mentioned in this article.

However, for the purpose of the quiz ignore the right and wrongs of the technique but just try to work out how this can be accomplished.

To recap all you have to do is make content that is at the end of the html show at the top of the page when displayed. The routine must allow automatically for a change in height of any of the elements on the page.

Rules:

Use the html and css provided (or use your own) and you can change it around as much as you like (e.g. add extra elements or wrappers as needed) but the main point being that the last real block of content at the bottom of the html should stay where it is in the html but appear at the top of the page when displayed.

[I]No hacks, or scripting allowed (apart from using zoom:1.0 for IE6 if needed).
No generated content (e.g. using before or after pseudo classes).
No duplicated content (e.g. copying all the content from the banner container and trying to use it to hold open the space).

Must work in all browsers from Ie6 upwards using the same standard code (no hacks or alternative rules - except for zoom).

No finding loopholes because I will just fill them later.

No CSS3 (i.e. you can’t use the[B] flexible box model layout[/B] module)

Valid html and css[/I] (apart from using zoom:1.0 for IE6 if needed)

Here is the html that you can use if you want but you can change the css and html as mentioned above. The content to be moved visually is contained within #bannerwrap.


<!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;
}
</style>
</head>
<body>
<div id="outer">
    <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>&copy; copyright (2011) me</p>
    </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>

Just to be clear you can change anything you like and add extra wrappers if needed but the html at the end of the page shouldn’t really change.

e.g.#bannerwrap remains at this position in the html but will appear first when displayed as shown in the attachments.



   ... 

   [B]<div id="bannerwrap" class="block block2">[/B]
        <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>
 [B]   </div>[/B]
</div>
</body>
</html>

I have attached a picture showing how the page looks before and after just in case it is still unclear.

If anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

Remember this is just for fun and there are no prizes.

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

Have fun.:slight_smile:

PS. : In case you missed the other tests you can find them all listed here:

PPS: A couple of you have sent me in some ideas for quizzes a while ago and I still haven’t forgotten them and I will get around to posting them so thanks for the support.

2

Oh yay, let’s see how to do this one. :smiley:

3

Hi Timo - Thanks for dropping by so soon :slight_smile:

If anything is unclear in the above then just shout.

4

Evil, Paul - just what I need. A distraction… :wink:

5

The starting code does not seem to work in my IE-tester ie6.
edit:
hmm, now it works, must be buggy IE-Tester…

6

Works fine for me in IE6 here.:slight_smile:

7

Just in case you thought it was too hard Timo (yurikolovsky) has already solved this. Well done Timo. :slight_smile:

It’s amazing how things that have been unsolved for years because someone originally said it couldn’t be done can be solved quite easily once someone say’s it’s possible.

Anyone else close to an answer?

8

PM’ed some kind of a solution. Not good for IE6-7 :frowning:

But definitely will be thinking further, since there are a couple of ways to tackle it :wink: But after sleeping 'cos it’s midnight here :slight_smile:

9

PM’ed another :rofl: This one should be a classic!

Not pretty (at all!), not valid (just a tiny bit)… but it works in all UAs!

And I still have a few more (unexpected) angles on this :wink:

10

Thanks for both solutions noonope and they work exactly as you said they would and made me laugh at the same time :slight_smile:

Keep searching for that definitive solution and I look forward to more entries.

11

I just pm’d you a simple one.

Assuming it works cross-browser, I can only use FF3.6 on my present system. :slight_smile:

12

Thanks Erik - yes that works fine and is the solution I intended :slight_smile:

Many thanks for taking part.

I’ll be interested to see if anyone can come up with a different way of doing this (that is valid and works cross browser).

13

I think I should have posted this quiz a few days earlier as things are a bit quiet around here now.:slight_smile:

I’ll leave it running over the next week anyway and give others a chance to have a go.

14

I have PM’d you with a unique method that I have working in all but IE6 at the moment.

15

Thanks Ray, that was a different and interesting approach that seems to work well (and one I hadn’t thought of). Well done :slight_smile:

16

Hi Paul, thanks for this, I love a good challenge! I’ve PMed you a minimal solution. Obviously I wouldn’t recommend anyone actually do this :slight_smile:

17

Thanks godfidget that seems to be working also so well done :slight_smile:

I’ll be posting all the solutions on Sunday so if anyone still wants to try then get a move on :wink:

18

Ohhh! I woke up in the middle of the night the other day and that occured to me as a possible solution. But then I went back to sleep and forgot about it until now. Good job guys!

19

Solution Time.

Well another year over and another quiz done and dusted :slight_smile:

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

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

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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).

20

Well that certainly was fun and thanks ever so much to Paul for arranging it!