How would YOU do this: Tables or CSS? [closed]

Question

_{(source: sontag.ca)}

Part I

This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table.

It can also be done with CSS, though it might involve a little more thinking.

This may not be a real world layout, but I have seen pages that are similar. Consider this a riddle; an exercise to buff up your CSS skills.

To make things a little more interesting, I have framed the question in a little 2 part web page called The Challenge. We will examine the code and the question: Layout with tables or CSS?, side-by-side, blow-by-blow, as our two opponents battle it out for code supremacy.

Part I lays out how The Challenge came to be. I hope you enjoy.

Part II is The Decision. You might be surprised.

---

Part II

I was amazed at how quickly really good answers appeared mere minutes after I posted. It was a humbling experience. I have no desire to compete in time trials with you.

BUT, all that being said, upon close examination of the solutions offered, I came to realize that none of the CSS solutions (including my own at the time) worked as well as either of the table solutions offered. The Challenge was all about CSS being better than tables for any layout solution.

So I added 3 new rules (remember, one of the rules is that the rules can be changed). This annoyed some people. So then I added some colorful explanations about why the rules were changed. I think this annoyed them even more.

1. Our garden is to have a fence around it; something to set it apart from whatever dreary surroundings it may find itself in; and not too expensive, but easy to keep clean. So I want a 1 pixel black border around the garden
2. Inhabitants of each garden plot (the characters) must be either black or white, depending on which shows them the best in their garden. Also they are all of cursive descent. There are no italics amoung them. ;-)
3. The garden is relocatable, that is, I can have this garden, anywhere on the page (no absolute positioning).

This is what the final output is to look like (background color optional):

_{(source: sontag.ca)}

My apologies for the capricious and last minute rule changes. I had it wrong. The inhabitants of each garden plot are artisans, hand crafted specialists. They are descendants of the cursive family, and owe their sense of style to the italics.

The garden has to be relocatable because both kinds of gardens (table and CSS) need to coexist on the same page. I may be wrong to say that position:absolute rules are not allowed. If you can get them to work in this context, then more power to you. They will certainly be accepted.

I asked for a fence around the plot because each garden type is going to be planted in a countryside with an orange background very similar to the color of the some of the flowers we grow.

I live in Holland now, and the Tulip season is fast approaching. If you fly over Holland in the next few weeks, and it's a clear day (kind of rare here) the landscape below you will look rather similar to this silly exercise.

I'm not crazy about orange but I do like and admire the Dutch, so that is why we have an orange background, a tribute to my host country. :-)

---

Part III

I have posted Ted's table answer from The Challenge below along with this image

_{(source: sontag.ca)}

because the occupants can be easily added to the garden plots without touching the CSS rules - everything is automatically centered.

Can you do this with CSS? Can you chop down the mightiest tree in the forest with... a herring?

---

Update: Charlie's answer is here.

Answer 1

Update: Final edit. Switched to STRICT DTD, removed italic to match the image in the question, and reverted back to full colour names for ids to show intent as per OPs comment on question, and sorted the main column of id names in the css into the order they appear in the html.

I also opted not to reused the outer div as the white 7 square (it didn't have it's own div in previous edits), as it wouldn't have been practical if you wanted to use the layout, and felt a little like cheating (although from a brevity/pixel perfect standpoint I liked the cheekiness of it).

View here: http://jsbin.com/efidi
Edit here: http://jsbin.com/efidi/edit
Validates as XHTML strict

<!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" xml:lang="en" lang="en"> <head><title>The Challenge</title> <style type="text/css"> div     { text-align: center; width:175px; height:175px; line-height: 35px;} div div {         float:left; width: 35px; height: 35px;} #orange, #maroon, #blue  , #green  {float:right;}  #orange, #silver {background-color:silver;  width:140px;} #navy  , #maroon {background-color:maroon; height:140px; line-height:140px;}          #navy   {background-color:navy  ;} #green , #red    {background-color:red   ;  width: 70px;} #yellow, #blue   {background-color:blue  ; height: 70px; line-height: 70px;}          #yellow {background-color:yellow;}          #white  {background-color:white ;}          #green  {background-color:green ;}          #orange {background-color:orange;} </style>  </head>  <body>    <div>      <div id="silver">1</div>      <div id="maroon">2</div>      <div id="navy"  >3</div>      <div id="red"   >4</div>      <div id="blue"  >5</div>      <div id="yellow">6</div>      <div id="white" >7</div>     <div id="green" >8</div>      <div id="orange">9</div>    </div> </body></html> 

Aside: I would perhaps put a little more whitespace in if I could, but this is at the limit before the code blocks here on SO starts getting scrollbars and I opted to have it all appear on screen.

Note: I borrowed the line-height fix from Tyson (who was first to get a correctly rendering answer).

Answer 2

Here are three solutions.

The markup:

<div id="outer">     <div id="a1">1</div>     <div id="a2">2</div>     <div id="a3">3</div>     <div id="a4">4</div>     <div id="a5">5</div>     <div id="a6">6</div>     <div id="a7">7</div>     <div id="a8">8</div>     <div id="a9">9</div> </div> 

The basic stylesheet (dimensions and color):

#outer {     width: 20em;     height: 20em; } #a1 {     background-color: #C0C0C0;     width: 80%;     height: 20%; } #a2 {     background-color: #800000;     width: 20%;     height: 80%; } #a3 {     background-color: #000080;     width: 20%;     height: 80%; } #a4 {     background-color: #FF0000;     width: 40%;     height: 20%; } #a5 {     background-color: #0000FF;     width: 20%;     height: 40%; } #a6 {     background-color: #FFFF00;     width: 20%;     height: 40%; } #a7 {     background-color: #FFFFFF;     width: 20%;     height: 20%; } #a8 {     background-color: #008000;     width: 40%;     height: 20%; } #a9 {     background-color: #FFA500;     height: 20%;     width: 80%; } 

And now the positioning:

• Using float:

  #a1 {     float: left; } #a2 {     float: right; } #a3 {     float: left; } #a4 {     float: left; } #a5 {     float: right; } #a6 {     float: left; } #a7 {     float: left; } #a8 {     float: right; } #a9 {     float: right; } 

• Using position:

  #outer {     position: relative; } #outer div {     position: absolute; } #a1 {     top: 0;     left: 0; } #a2 {     top: 0;     right: 0; } #a3 {     top: 20%;     left: 0; } #a4 {     top: 20%;     left: 20%; } #a5 {     top: 20%;     right: 20%; } #a6 {     top: 40%;     left: 20%; } #a7 {     top: 40%;     left: 40%; } #a8 {     bottom: 20%;     right: 20%; } #a9 {     bottom: 0;     right: 0; } 

• Using margin:

  #a1 { } #a2 {     margin: -20% -80% 0 80%; } #a3 {     margin: -60% 0 0 0; } #a4 {     margin: -80% -20% 0 20%; } #a5 {     margin: -20% -60% 0 60%; } #a6 {     margin: -20% -20% 0 20%; } #a7 {     margin: -40% -40% 0 40%; } #a8 {     margin: 0 -40% 0 40%; } #a9 {     margin: 0 -20% 0 20%; } 

Answer 3

Here you go - less lines than any misuse of table tags can provide:

<img
    src="http://sontag.ca/TheChallenge/tiles.gif"
    alt="nine assorted coloured rectangles"
/>

:P

Answer 4

This matches your table example exactly, including the vertically and horizontally centered text (which no one else has done so far).

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Boxy Boxes in a Box</title>

    <style type="text/css" media="screen">
        #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }

        .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

        #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
        #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
        #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
        #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
        #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
        #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
        #box_7 {top: 70px; left: 70px; background-color: white;}
        #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
        #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
</head>

<body>
    <div id="container">
        <div id="box_1" class="box">1</div>
        <div id="box_2" class="box">2</div>
        <div id="box_3" class="box">3</div>
        <div id="box_4" class="box">4</div>
        <div id="box_5" class="box">5</div>
        <div id="box_6" class="box">6</div>
        <div id="box_7" class="box">7</div>
        <div id="box_8" class="box">8</div>
        <div id="box_9" class="box">9</div>
    </div>
</body>
</html>