CSS - Test Your CSS Skills Number 36 - Content First

**Paul O'B** · Jan 3, 2011 04:32

Originally Posted by noonnope

Hey Paul,

One more thing. My CSS solution works for IE8, so it's not

it's

Amended

(It's not easy to read my scribbled notes when I have a hangover

)

**zcorpan** · Jan 4, 2011 08:17

I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!

**Paul O'B** · Jan 4, 2011 08:53

Originally Posted by zcorpan

I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!

Cheat

**noonnope** · Jan 4, 2011 10:08

Originally Posted by zcorpan

I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!

Double Cheat

**zcorpan** · Jan 4, 2011 13:53

Bah, so it needs to be valid html? What if I get the spec changed?

Another idea is to use display:table on a wrapping element and display:table-caption on the banner, which puts it on top. Doesn't work in old IE, though.

**noonnope** · Jan 4, 2011 14:16

Cheat, cheat, cheat zcorpan. These are all my solutions

Check them out!

**zcorpan** · Jan 4, 2011 14:34

*Looks* ... don't see table-caption there! I see table-header-group, though. Yeah, basically same idea.

**YuriKolovsky** · Jan 4, 2011 14:35

I still wonder if there is a proper cross-browser way of doing this, I mean I got it to work in IE6-7 using a bug with percentages, so IN THEORY, this + potential css2 tables (or even maybe the css3 Flexible Box Module...)

anyway, I'm happy that I managed to get into this quiz and not miss it like the last one. :P

**Paul O'B** · Jan 4, 2011 16:50

Originally Posted by YuriKolovsky

I still wonder if there is a proper cross-browser way of doing this, I mean I got it to work in IE6-7 using a bug with percentages, so IN THEORY, this + potential css2 tables (or even maybe the css3 Flexible Box Module...)

anyway, I'm happy that I managed to get into this quiz and not miss it like the last one. :P

The actual solution is cross browser already

The fact that the main layout is absolutely placed is of little concern as long as everything else is inside.

Th css3 flexible box model should do this easily thuogh but we'll have to wait a long while for full support. The display:table properties in noonope (and zcorpans) suggestions will work for most browsers apart from ie7 and under.

**goldfidget** · Jan 4, 2011 17:25

Hi Paul, I originally wrote this of as a bit of fun, but thinking about it further, there's actually quite a nifty little idea here. We use nested floats to control the source order of a column layout, so why not use these to create horizontal columns.

There are limitations to the technique, I could get 321, 312 and 231 working, but not 213. Still though, given the right design, I can imagine this actually being useful for something one day...

Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
<style>
.wrapper {position:relative; width:800px;}
.top_content {border:1px solid green;}
.lower_content_wrapper {position:absolute; bottom:0;}
.lower_content {position:absolute; border:1px solid red;width:800px;}
.bottom_content {position:absolute; bottom:0; height:1px;}
</style>
</head>
<body>
<div class="wrapper">
  
  <div class="lower_content_wrapper">
    <div class="lower_content">
      <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 class="middle_content">
        <p>Middle Content</p>
        <p>Middle Content</p>
        <p>Middle Content</p>
        <p>Middle Content</p>
        <p>Middle Content</p>
      </div>
    </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>

**Paul O'B** · Jan 5, 2011 03:21

Hi,

Yes I played around with something similar and I'm sure there is a use for it somewhere

I also had the idea that perhaps the technique could be used to completely reverse the order of ten items so that instead of going from one to ten they went from ten down to one. However I gave up after a while of fiddling around as it didn't look possible.

As an aside you may be interested in this very old demo where I have added the absolute trick at the end of the routine and a basic 3 column layout can be manipulated into at least 14 variations now.

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>Content Re-organised</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
function toggle(el) {
    document.getElementById("swapclass").className = el;
}

//--><!]]></script>
<style type="text/css">
* {
    margin:0;
    padding:0
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
p, h1, h2 {
    margin:.5em 0;
    padding:0 10px
}
#outer {
    width:750px;
    margin:20px auto;
    border:1px solid #000;
    clear:both;
    position:relative;
}
.footer{
    clear:both;
    padding:10px;
 border-top:1px solid #000;
}

/* version 0 .........*/
.version0 .col0 {
    width:100%;
}
.version0 .col1 {
    float:right;
    width:100%;
    margin-left:-420px;
}
.version0 .col1 p, .version0 .col1 h2 {
    margin-left:420px;
}
.version0 .col2 {
    width:200px;
    float:left;
}
.version0 .col3 {
    width:200px;
    float:left;
}
/* end */



/* version 1 .........*/
.version1 .col0 {
    width:100%;
}
.version1 .col1 {
    float:right;
    width:100%;
    margin-left:-420px;
}
.version1 .col1 p, .version1 .col1 h2 {
    margin-left:420px;
}
.version1 .col2 {
    width:200px;
    float:right;
}
.version1 .col3 {
    width:200px;
    float:right;
}
/* end */

/* version 2...........*/

.version2 .col1 {
    float:right;
    width:100%;
    margin-left:-320px;
}
.version2 .col1 p, .version2 .col1 h2 {
    margin-left:320px;
}
.version2 .col2 {
    width:300px;
    float:left;
}
.version2 .col3 {
    width:100%;
    clear:both;
}
/* end */

/* version 3...........*/
.version3 .col0, .version3 .col1, .version3 .col2, .version3 .col3 {
    float:left;
    width:175px;
    margin-right:10px;
}
/* end */

/* version 4...........*/

.version4 .col1 {
    float:left;
    width:100%;
    margin-right:-320px;
}
.version4 .col1 p, .version4 .col1 h2 {
    margin-right:320px;
}
.version4 .col2 {
    width:300px;
    float:right;
}
.version4 .col3 {
    width:100%;
    clear:both;
}
/* end */

/* version 5...........*/
.version5 .col0, .version5 .col1, .version5 .col2, .version5 .col3 {
    width:100%;
}
/* end */

/* version 6...........*/
.version6 .col1 {
    float:left;
    width:100%;
    margin-right:-320px;
}
.version6 .col1 p, .version6 .col1 h2 {
    margin-right:320px;
}
.version6 .col2 {
    width:300px;
    float:right;
}
.version6 .col3 {
    width:300px;
    float:left;
}
/* end */

/* version 7...........*/
.version7 .col0 {
    float:left;
    width:49%;
}
.version7 .col1 {
    float:right;
    width:49%;
}
.version7 .col2 {
    width:49%;
    float:right;
    clear:both
}
.version7 .col3 {
    width:49%;
    float:left;
}
/* end */

/* version 8...........*/
.version8 .col0 {
    float:right;
    width:49%;
}
.version8 .col1 {
    float:left;
    width:49%;
}
.version8 .col2 {
    width:49%;
    float:left;
    clear:both
}
.version8 .col3 {
    width:49%;
    float:right;
}
/* end */

/* version 9...........*/
.version9 .col0 {
    float:right;
    width:49%;
}
.version9 .col1 {
    float:left;
    width:49%;
}
.version9 .col2 {
    width:100%;
}
.version9 .col3 {
    width:100%;
}
/* end */

/* version 10 .........*/
.version10 .col0 {
    width:100%;
}
.version10 .col1 {
    float:left;
    width:100%;
    margin-right:-420px;
}
.version10 .col1 p, .version10 .col1 h2 {
    margin-right:420px;
}
.version10 .col2 {
    width:200px;
    float:right;
}
.version10 .col3 {
    width:200px;
    float:right;
}
/* end */

/* version 11 .........*/
.version11 h2 {
    font-size:120%
}
.version11 .col0 {
    width:120px;
    float:left;
}
.version11 .col1, .version11 .col2, .version11 .col3 {
    float:right;
    width:600px;
}
/* end */

/* version 11 .........*/
.version12 h2 {
    font-size:120%
}
.version12 .col0 {
    width:140px;
    float:right;
}
.version12 .col1, .version12 .col2, .version12 .col3 {
    float:left;
    width:590px;
}
/* end */

.version13 .inner{
 position:absolute;
 top:100%;
 width:100%;
 border:1px solid #000;
 left:-1px;
}



/* toggle */

ul {
    list-style:none;
    margin:.5em
}
li {
    float:left;
    margin:4px;
    font-weight:bold;
}
li a {
    float:left;
    width:22px;
    height:20px;
    background:#c1daee;
    color:#000;
    border:#036;
    text-align:center;
    line-height:20px;
    font-size:14px;
    text-decoration:none;
    border:1px solid #036;
}
li a:hover {
    background:#ffffcc
}
</style>
</head>
<body id="swapclass" >
<ul>
    <li>Layouts: </li>
    <li><a onclick="toggle('version0');return false;" ref="#nogo">1</a></li>
    <li><a onclick="toggle('version1');return false;"href="#nogo">2</a></li>
    <li><a onclick="toggle('version2');return false;"href="#nogo">3</a></li>
    <li><a onclick="toggle('version3');return false;"href="#nogo">4</a></li>
    <li><a onclick="toggle('version4');return false;"href="#nogo">5</a></li>
    <li><a onclick="toggle('version5');return false;"href="#nogo">6</a></li>
    <li><a onclick="toggle('version6');return false;"href="#nogo">7</a></li>
    <li><a onclick="toggle('version7');return false;"href="#nogo">8</a></li>
    <li><a onclick="toggle('version8');return false;"href="#nogo">9</a></li>
    <li><a onclick="toggle('version9');return false;"href="#nogo">10</a></li>
    <li><a onclick="toggle('version10');return false;"href="#nogo">11</a></li>
    <li><a onclick="toggle('version11');return false;"href="#nogo">12</a></li>
    <li><a onclick="toggle('version12');return false;"href="#nogo">13</a></li>
    <li><a onclick="toggle('version13');return false;"href="#nogo">14</a></li>
</ul>
<div id="outer">
    <div class="inner">
        <h1>Content re-organised</h1>
        <div class="col0">
            <h2>container 1</h2>
            <p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
        </div>
        <div class="col1">
            <h2>container 2</h2>
            <p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
        </div>
        <div class="col2">
            <h2>container3</h2>
            <p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : This is some content in a container : </p>
        </div>
        <div class="col3">
            <h2>container4</h2>
            <p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : </p>
        </div>
    </div>
    <div class="footer">
    <h2>Footer</h2>
    <p>This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content</p> </div>
</div>
</body>
</html>

**rrkjaiswal63** · Jan 5, 2011 14:00

But I have found these CSS does not work perfectly on IE5 .When I tried on Mozilaa and IE5 and IE6 ,result was quite different.

**Paul O'B** · Jan 5, 2011 15:20

Originally Posted by rrkjaiswal63

But I have found these CSS does not work perfectly on IE5 .When I tried on Mozilaa and IE5 and IE6 ,result was quite different.

The main solution works fine in Mozilla and IE6. It will also work in IE5 without too much problem either but that is not one of the browsers supported in the quiz anyway. The solution won't work without electricity though.

**YuriKolovsky** · Jan 8, 2011 06:06

Yep, won't work without a computer either.
Sadly this leaves a significant amount of insignificant people behind.

**thierry koblentz** · Jan 8, 2011 13:58

Very nice!

**Paul O'B** · Jan 8, 2011 16:08

Originally Posted by thierry koblentz

Very nice!

Thanks Thierry

Nice to see you around here (again).

**thierry koblentz** · Jan 8, 2011 17:18

Originally Posted by Paul O'B

Nice to see you around here (again).

Hi Paul,
The truth is that fora are not really my thing, I prefer mailing lists.
But! threads like this one make me think I should make an effort ;-)
Once again, kudos for this solution!

**RyanReese** · Jan 25, 2011 14:20

Out of quiz ideas Paul or should I expect a new one up? Maybe I'll keep my word for once and do the next one

.

**Paul O'B** · Jan 25, 2011 15:12

Originally Posted by RyanReese

Out of quiz ideas Paul or should I expect a new one up? Maybe I'll keep my word for once and do the next one

.

I have a couple lined up already but I didn't want to clash with the main forum html/css quiz that's about to start in a few days so I'll wait until that gets going.

**YuriKolovsky** · Jan 25, 2011 15:22

what "main forum html/css" quiz?

**Paul O'B** · Jan 25, 2011 15:53

See my sig Timo

**Paul O'B** · May 14, 2011 01:03

New quiz posted

User Tag List

Thread: CSS - Test Your CSS Skills Number 36 - Content First

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions