I faced the problem with white-space: pre-line in my layout. When I wrap content in a div element it works just fine, but when I replace div with table text is no longer wrapping. This is only small part just to show the case. In original code it would be hard to replace this outer table. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
border: 1px dashed red;
font-size: 12px;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0 auto !important;
padding: 10px;
width: 600px;
}
.document-preview {
border-spacing: 0;
width: 100%;
}
.document-preview .content-details-row {
padding: 0 2px 0 162px;
position: relative;
white-space: nowrap;
z-index: 1;
}
.document-preview .content-details-row span:first-child {
display: block;
float: left;
margin: 0 2px 0 -160px;
overflow: hidden;
width: 160px;
z-index: 2;
}
.document-preview .content-details-row span:first-child:after {
content: "..............................................................................";
font-weight: lighter;
font-size: 10px;
letter-spacing: 2px;
}
.document-preview .content-details-row .content-details-value {
display: inline-block;
width: 100%;
z-index: 2;
}
.document-preview .content-details-row .content-details-value > div {
white-space: pre-line;
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="document-preview"><tbody><tr><td>
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Doesn't work: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</td></tr></tbody></table>
<hr />
<div class="document-preview">
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Works: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</div>
</body>
</html>
Working sample: http://jsfiddle.net/UPXzt/1/
Thanks in advance.
add this style to your page
table {
table-layout: fixed;
}
sample:
http://jsfiddle.net/UPXzt/10/
Try this demo
just add width to the div
.document-preview .content-details-row .content-details-value > div
{
width: 430px;
white-space: pre-wrap !important;
word-wrap: break-word;
}
I am trying to use CSS sprites for a Navigation bar. After a lot of Internet research, I think I have determined the 'simplest' way. All appears to work fine EXCEPT when I click the browser's Back button. In IE (8.0.6001.18701), the Active state is 'stuck' (looks like button is pushed down). In Firefox (14.0.1) the Hover state is 'stuck'. I can live with the Firefox issue as it goes away as soon as the mouse is moved off the Back button, but not the IE issue. I currently have the navbar in a header file that I use with Includes to keep things simple and consistant.
Here is the Template html. I use this for all my pages. (when I get past this problem, I will actuall enter in the rest of the bodies)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="DS.css">
</head>
<body>
<div id="centerpage">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td>
<!--webbot bot="Include" U-Include="Nav_Includes/Header.htm" TAG="BODY" --></td>
</tr>
<tr>
<td>Enter page data here.<br>
<hr width="770" size="1">
<span id="timestamp">Page last updated:
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%m/%d/%Y %I:%M %p" --></span></td>
</tr>
<tr>
<td>
<!--webbot bot="Include" U-Include="Nav_Includes/Footer.htm" TAG="BODY" --></td>
</tr>
</table>
</div>
</body>
</html>
Here is the header.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dolphin Storage Header</title>
<link rel="stylesheet" type="text/css" href="../DS.css">
</head>
<body>
<img border="0" src="../images/header.jpg" width="760" height="101" align="center">
<p><a class="navHome" href="../index.htm"></a>
<a class="navUnits" href="../units.htm"></a>
<a class="navSpecials" href="../specials.htm"></a>
<a class="navAbout" href="../about.htm"></a>
<a class="navContact" href="../contact.htm"></a></p>
</body>
</html>
The css file:
body {
font-family: Arial, Helvetica, Sans-serif;
color: #000000;
text-align:center; /* Fix for IE not centering webpage */
background-color: #ffe670;
}
#centerpage {
width: 770px;
margin: 0 auto; /* Top & Bottom = 0, Right & Left = auto to center the page horizontally */
text-align:left; /* 2nd part of IE fix for centering webpage */
}
/* Navagation bar, using 'sprite' images */
a.navHome {
display: block;
float: left;
width: 160px;
height: 30px;
background-image: url('Nav_Buttons/Home.jpg');
background-repeat: no-repeat;
background-position; 0 0;
}
a.navHome:hover {
background-position: 0 -30px;
}
a.navHome:active {
background-position: 0 -60px;
}
a.navUnits {
display: block;
float: left;
width: 150px;
height: 30px;
background-image: url('Nav_Buttons/Units.jpg');
background-repeat: no-repeat;
background-position; 0 0;
}
a.navUnits:hover {
background-position: 0 -30px;
}
a.navUnits:active {
background-position: 0 -60px;
}
a.navSpecials {
display: block;
float: left;
width: 150px;
height: 30px;
background-image: url('Nav_Buttons/Specials.jpg');
background-repeat: no-repeat;
background-position; 0 0;
}
a.navSpecials:hover {
background-position: 0 -30px;
}
a.navSpecials:active {
background-position: 0 -60px;
}
a.navAbout {
display: block;
float: left;
width: 150px;
height: 30px;
background-image: url('Nav_Buttons/About.jpg');
background-repeat: no-repeat;
background-position; 0 0;
}
a.navAbout:hover {
background-position: 0 -30px;
}
a.navAbout:active {
background-position: 0 -60px;
}
a.navContact {
display: block;
float: left;
width: 160px;
height: 30px;
background-image: url('Nav_Buttons/Contact.jpg');
background-repeat: no-repeat;
background-position; 0 0;
}
a.navContact:hover {
background-position: 0 -30px;
}
a.navContact:active {
background-position: 0 -60px;
}
#timestamp {
font-family: Arial, Helvetica, Sans-serif;
color: #000000;
font-size: xx-small;
}
H5 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #035f8e;
}
Sprites: (won't let a new user post images, sorry)
Use the :link and :visited pseudo classes to set all the common default states prior to defining the individual :hover and :active states using the lvha principle:
a.navUnits:link, a.navUnits:visited, a.navSpecials:link, a.navSpecials:visited, a.navAbout:link, a.navAbout:active, a.navContact:link, a.navContact:visited, a.navHome:link, a.navHome:visited { background-position: 0 0; }
My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid
I have CSS sheet which fails to create a horizontal scroll bar when the table width is greater than 800px wide.
CSS looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
html, body {
max-width : 800px;
margin-left:auto;
margin-right:auto;
}
body
{
background-color:#000000;
}
#content {
position:relative;
z-index:1;
}
#header
{
position:relative;
background-image: url(http://img.photobucket.com/albums/v224/Tahira/HARPALGETMENERDS4.jpg);
padding: 110px;
background-repeat:no-repeat;
background-position: 52% 0%;
}
#header h1.bottom {margin: -100px;}
#header2
{
position:relative;
margin-top: -70px;
margin-left: -40px;
background-position: 0% 0%;
}
#container
{
background: #ffffff;
}
table, td, th
{
width: 800px;
overflow: auto;
overflow-y: hidden;
scrollbar-base-color:#ffeaff
font-size: 93%;
font-family:Calibri;
border-collapse:collapse;
border-bottom: 1px solid #fff;
}
th
{
background-color:#6293d9;
color:#d1d9ec;
}
td
{
background-color:#e8edff;
color:#0059ff;
}
...
</style>
try to wrap your table inside a
<div style="width:800px; overflow-x:auto;">
<table>...</table>
</div>
You need to remove this:
overflow-y: hidden;
That means that when it overflow horrozontally it will just hide the content rather than show a scroll bar.
Example on jsFiddle.com
div.scroll{
width: 800px;
overflow:auto;
overflow-y: hidden;
}
table
{
scrollbar-base-color:#ffeaff
font-size: 93%;
font-family:Calibri;
border-collapse:collapse;
border-bottom: 1px solid #fff;
}
th
{
background-color:#6293d9;
color:#d1d9ec;
}
td
{
background-color:#e8edff;
color:#0059ff;
}
</style>
</head>
<body>
<div class="scroll">
<table>
<tr>
<td>test</td><td>test</td> ... <td>test</td>
</tr>
<tr>
<td>test</td><td>test</td> ... <td>test</td>
</tr>
</table>
<div>
</body>
</html>
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>