I have a table.matrix in a div.matrix-wrapper.
The whole thing shall be centered in a bigger div.
I only achieved this by adding display: table; margin: 0 auto; to the wrapper.
(Adding the auto margin to the table is not an option, because of the gray border.)
On its own, the result looks the way I expect. (left)
But when I place it within a table, It looks like the wrapper has a padding. (middle)
When I remove display: table; from the wrapper, the pseudo padding goes away,
but then the centering does not work anymore. (right)
(External links removed.)
Based on the answer given by Alohci, I added this simplified example:
.green {
width: 80px;
height: 50px;
border: 2px solid #0d0;
}
.red {
display: table;
margin: 0 auto;
border: 2px solid red;
}
.blue {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid yellow;
background-color: blue;
}
table {
border: 3px solid black;
border-spacing: 5px;
margin: 20px 0;
}
table td {
border: 3px solid gray;
color: gray;
padding: 5px;
}
<h2>plain boxes</h2>
<p>The red box wraps directly around the blue box with the yellow border.</p>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
<h2>boxes in table</h2>
<p>The red box inherits border-spacing from the surrounding table.</p>
<table>
<tr>
<td>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
</td>
</tr>
</table>
<h2>plain table</h2>
<table>
<tr>
<td>plain</td>
<td>table</td>
</tr>
</table>
border-spacing and border-collapse inherit. The wrapping table has
border-spacing: 2px;
border-collapse: separate;
applied to it through the user-agent stylesheet, so these values are inherited by your div.matrix-wrapper and have effect when it's given display:table.
To remove the "padding", just set the div.matrix-wrapper to border-spacing: 0px.
I am having trouble with the action of my DIVS. Basically I have a div and outside of the div if I put some html text it still shows up inside the div. I am not sure what I am doing wrong. If someone could take a peek I would greatly appreciate it. Thanks in advance.
html:
<div id="content">
<p> To submit <?php echo $_SESSION['sight_type']?> sightings, choose a location type.</p>
<div id = "form_location_type" >`
<form method="POST" action="location_type_input.php">
<table>
<tr>
<td><input type="radio" name="location_type" value="new" /></td><td><p> New location</p></td></tr>
<tr>
<td><input type="radio" name="location_type" value="saved" /></td><td><p> Saved location</p></td>
<td><input type="submit" value="Continue"></td></tr>
<table>
</form>
</div> <!-- End form_location_type div -->
THIS SHOULD BE OUTSIDE ABOVE DIV BUT IT PRINTS INSIDE
</div> <!-- End content div -->
<div id="footer"> <?php include 'footer.php'; ?> </div> <!-- End footer div -->
css (most relevant is the very last commented section)
html { height: 100%; }
body, html { min-height: 100%; height: 100%;margin : 0;
padding : 0; }
/*html, body {
height:auto
height: 100%; }/* Required */
body {
width:100%;
line-height : 1.8em;
color : #000000;
background : #F5F5FF;
}
#container {
position: relative;
min-height: 100%;
width : 800px;
margin : 0 auto 0 auto;
border-style: solid;
border-width:1px;
background : #FFFFCC;
-moz-box-shadow: 10px 10px 5px #888888; /* shadow border */
box-shadow: 10px 10px 5px #888888;
}
#footer {
clear:both;
position:absolute;
text-align: center;
left:0;
bottom: 0;
width: 800px;
background : #FFFFCC;
font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
}
/* form on form_location_type.php */
#form_location_type {
margin: 0 auto;
background:white;
border:solid 1px;
}
Make sure you close your table properly:
<table>
...
</table>
That seems to be the problem: http://jsfiddle.net/RDGuY/2/
You have not closed table properly.
Add
</table>
instead of the
<table>
at the end of form_location_type div
Additionally try to add some bottom padding in form_location_type div:
Add the following code in your CSS:
#form_location_type {
padding-bottom: 2em;
}
Now check if the text is separated from form div???
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p>Click here to read more </p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.
I.e.:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
I had a similar problem. This helps me across main email clients.
Add:
attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty
You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.
If you see table class it has border-spacing: 2px; You could override table class in your css and set its border-spacing: 0px!important in table; I did it like
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
It saved my day.Hope it would be of help. Thanks.
Nothing has worked. The solution for the issue is.
<style>
table td {
padding: 0;
}
</style>
Used font-size:0 in parent TD which has the image.
I had a similar problem and I solved it by (inline)styling the td element as follows :
<td style="display: block;">
This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.
Hi as #andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.
Put display:block on the css for the cell, and valign="top" that should do the trick
If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
(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.
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
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. ;-)
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.
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).
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%;
}
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
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>
As long as the widths and heights are constant, one can always use absolute positioning to get the same effect. This should be obvious enough, so that I don't have to type it out (it's late here and I'm lazy :P)
I took a slightly different approach than the "id everything" solutions I've seen so far. This comes in less than 100 chars more than the table based solution.
<!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 {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
.spiral { width:175px; height:175px }
.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
top:35px;
left:35px;
width:105px;
height:105px
}
.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="t l w" style="background-color:silver">1</div>
<div class="t r h" style="background-color:maroon">2</div>
<div class="b l h" style="background-color:navy">3</div>
<div class="c">
<div class="t l w" style="background-color:red">4</div>
<div class="t r h" style="background-color:blue">5</div>
<div class="b l h" style="background-color:yellow">6</div>
<div class="c">7</div>
<div class="b r w" style="background-color:green">8</div>
</div>
<div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>
Edit: Based on your modifications I'm posting a slightly more verbose but hopefully clearer solution that adds a black border, sets some text to white, and does not absolutely position the "garden".
<!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 {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
div.spiral {
position:relative;
width:175px;
height:175px;
border: 1px solid #000
}
.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
top:35px;
left:35px;
width:105px;
height:105px
}
.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="top left wide" style="background-color:silver">1</div>
<div class="top right tall" style="background-color:maroon">2</div>
<div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
<div class="center">
<div class="top left wide" style="background-color:red">4</div>
<div class="top right tall" style="background-color:blue">5</div>
<div class="bottom left tall" style="background-color:yellow">6</div>
<div class="center">7</div>
<div class="bottom right wide" style="background-color:green">8</div>
</div>
<div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>
No one here has given a table solution yet, and The Challenge is all about comparing CSS layouts to Table based layouts in a controlled (and heavily biased) scenario.
So here is Ted's Table Layout solution and his challenge...
"With my table based solution, it is very easy to add new inhabitants to the garden plots
by very simple additions to the HTML markup only! All inhabitants are automatically centered and spaced in a pleasing style. For example:"
(source: sontag.ca)
(source: sontag.ca)
"As far as I can tell, no CSS based solutions here can accomodate new inhabitants without extensive renovations to the CSS rules."
"Better bring lots of money boys, I'm feeling really hungry and thirsty now."
<!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>
<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#master TD { text-align: center }
#master {
border: 1px solid black;
font: italic 100%/200% 'Comic Sans MS', cursive;
}
#silver { background-color:silver }
#maroon { background-color: maroon; color:white }
#navy { background-color:navy; color:white }
#red { background-color: red }
#blue { background-color:blue; color:white }
#yellow { background-color: yellow }
#green { background-color:green; color:white }
#orange { background-color:orange }
#white { background-color:white }
#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }
</style>
</head>
<body style="background-color:#ffb600">
<table id="master" border="0" cellpadding="0" cellspacing="0"
summary="layoutByTable"><tr>
<td id="silver" colspan="2" > 1 </td>
<td id="maroon" rowspan="2" > 2 </td>
</tr><tr>
<td id="navy" rowspan="2" > 3 </td>
<td>
<table border="0" cellpadding="0" cellspacing="0"
summary="inner"><tr>
<td id="red" colspan="2" > 4 </td>
<td id="blue" rowspan="2" > 5 </td>
</tr><tr>
<td id="yellow" rowspan="2" > 6 </td>
<td id="white"> 7 </td>
</tr><tr>
<td id="green" colspan="2" > 8 </td>
</tr>
</table>
</td>
</tr><tr>
<td id="orange" colspan="2"> 9 </td>
</tr>
</table>
</body>
</html>
Single table solution.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<meta http-equiv="Content-language" content="en" />
<title>The Challenge</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" summary="">
<tr>
<td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
<td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
<td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td>
</tr><tr>
<td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
<td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
<td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
</tr><tr>
<td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
<td width="35" height="35" align="center"><i>7</i></td>
</tr><tr>
<td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
</tr><tr>
<td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
</tr>
</table>
</body>
</html>
It is valid XHTML 1.0 Transitional and I've included Dr. Suess character :)
By stripping Dr. Suess character, the <?xml declaration, the meta-tags and the summary attribute you could cut it down to 929 characters and still be valid XHTML 1.0 Transitional.
Edit
As requested, XHTML 1.0 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">
BODY {background: orange}
#garden {border: 1px solid black; color: black}
#garden TD {
font: italic 100% 'Comic Sans MS', cursive;
height: 35px;
padding: 0;
text-align: center;
width: 35px
}
#c1 {background: silver}
#c2 {background: maroon; color: white}
#c3 {background: navy; color: white}
#c4 {background: red}
#c5 {background: blue; color: white}
#c6 {background: yellow}
#c7 {background: white}
#c8 {background: green; color: white}
#c9 {background: orange}
</style>
</head>
<body>
<table id="garden" cellspacing="0">
<tr>
<td id="c1" colspan="4">1</td>
<td id="c2" rowspan="4">2</td>
</tr><tr>
<td id="c3" rowspan="4">3</td>
<td id="c4" colspan="2">4</td>
<td id="c5" rowspan="2">5</td>
</tr><tr>
<td id="c6" rowspan="2">6</td>
<td id="c7">7</td>
</tr><tr>
<td id="c8" colspan="2">8</td>
</tr><tr>
<td id="c9" colspan="4">9</td>
</tr>
</table>
</body>
</html>
970 non-whitespace characters, orange background, Dr. Suess's Grinch removed.
Brevity of markup....
<!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">
.garden {
position: relative;
width: 175px;
height: 175px;
font-family: 'Comic Sans MS', cursive;
border: 1px solid;
color: #000;
}
.garden div {
position: absolute;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
.garden div:first-child {
width: 140px;
background: silver;
}
.garden div:first-child + div {
right: 0;
height: 140px;
line-height: 140px;
color: #fff;
background: maroon;
}
.garden div:first-child + div + div {
top: 35px;
height: 140px;
line-height: 140px;
color: #fff;
background: navy;
}
.garden div:first-child + div + div + div {
top: 35px;
left: 35px;
width: 70px;
background: red;
}
.garden div:first-child + div + div + div + div {
top: 35px;
right: 35px;
height: 70px;
line-height: 70px;
background: blue;
}
.garden div:first-child + div + div + div + div + div {
top: 70px;
left: 35px;
height: 70px;
line-height: 70px;
background: yellow;
}
.garden div:first-child + div + div + div + div + div + div {
top: 70px;
left: 70px;
background: white;
}
.garden div:first-child + div + div + div + div + div + div + div {
top: 105px;
left: 70px;
width: 70px;
background: green;
}
.garden div:first-child + div + div + div + div + div + div + div + div{
bottom: 0;
right: 0;
width: 140px;
background: orange;
}
</style>
</head>
<body>
<div class="garden">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
link
I think we've proved that there's more than one way to do this. The table tag and CSS are both viable options.
Rather than add another way to complete the challenge I'd just like to say that, whether it's easier or harder, simpler or more complex: tables in HTML should be used for displaying tabular data.
Tables are made for tabular data.
CSS is made for styling/presentation.
(source: sontag.ca)
I first did this exercise a little over 2 years ago when I was first learning HTML and CSS. My first solution was like the one you see here, except without the anonymous container DIVs. Then I got this idea for a web page that did a side by side comparison of CSS to a Table to prove CSS was better. So I worked on The Challenge page, published it, and then posted this question.
Sam Hasler posted an answer within minutes, it seems, that was really close. I could see he was on track for a better solution than what I had. All his divs were in order, and mine were not. Jacco posted a comment asking why I used two nested tables when one would do. He was right too, of course.
So I had two Homer Simpson "Doh!" moments right away. I read other questions and answers on tables vs. CSS. Someone mentioned that tables centered vertically. My answer did not center vertically either, but I thought it might be possible. The whole point, after all, is to do everything a table can do and better. I had painted myself into a corner by now, looking like a fool, so I had to find an answer.
Eventually (am embarrassed to say how long it was) I came up with the solution below.
I was then able to fulfill my original concept of a side-by-side comparison web page.
Here is an explanation of how it all works and why you should use CSS
Charlie's answer...
<!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>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer {
width:175px; height:175px;
text-align:center;
font: italic 100%/200% 'Comic Sans MS', cursive;
border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV
{ display: table-cell; vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width: 35px }
#c2>DIV, #c3>DIV { height: 140px }
#c1>DIV, #c9>DIV { width: 140px }
#c5>DIV, #c6>DIV { height: 70px }
#c4>DIV, #c8>DIV { width: 70px }
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }
#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }
/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% }
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }
</style>
</head>
<body>
<div id="outer">
<div id="c1"><div> 1 </div></div>
<div id="c3"><div>3<br/>3<br/>3</div></div>
<div id="inner">
<div id="c4"><div> 4 </div></div>
<div id="c5"><div> 5<br/>5 </div></div>
<div id="c6"><div> 6 </div></div>
<div id="c7"><div> 7 </div></div>
<div id="c8"><div> 8 </div></div>
</div>
<div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
<div id="c9"><div> 9 9 9</div></div>
</div>
</body>
</html>
Here is an example that doesn't use absolute positioning, doesn't use table-cell, and is valid in IE6-8, FF, etc.
<!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>Terrible Ted's Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}
div {float:left}
#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}
#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}
#c6, #c7 {margin-top:-35px}
#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}
</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>