Below is a contrived example just to show it can be done. The W3C (World Wide Web Consortium) is trying to phase out tables for page layout design. I am not for or against tables, but it looks like they will succeed eventually, as Tableless design is becoming more popular with webmasters.
For anyone who has already started using a style sheet for their page format, the main trouble is getting it to work with the many different browsers. Another problem is centering blocks, again the browsers are different. This is not as hard as you may think, once you realise the main differences.
Microsoft's Internet Explorer seems to be the odd-one-out in how it interprets what is called "The Box Model", and also how it centers things. To do any testing, you need at least two browser installed. I initially use Internet Explorer and Firefox. Firefox is free and produces similar results to most of the alternative browsers.
It works in FF, but not in IE - why?
<style type="text/css">
body {margin: 0; padding: 0;}
.layout {width: 100%;}
.leftpanel {float: left; width: 50%; background: #fcc;}
.rightpanel {float: left; width: 50%; background: #abc;}
</style>
<div class="layout">
<div class="leftpanel">Left Panel Text</div>
<div class="rightpanel">Right Panel Text</div>
</div>
IE mysteriously calculates 50% + 50% = 100.1%. Some percentages calculate ok in IE, while others don't. If you come across this problem, set one width (or both) slightly lower (say 49.9%) and it works. If you have to set the percentage value any lower, you've made a common mistake that I'll cover later.
Now try these values:
.leftpanel {float: left; width: 50.1%; background: #fcc;}
.rightpanel {float: left; width: 49.9%; background: #abc;}
It works now, showing that IE can add 50.1% + 49.9% but can't add 50% + 50% correctly.
Only Microsoft could come up with this!!!
Click here to see what it looks like
Someone mentioned to me, why don't I use {float: right;} for the right panel?
Well, you can in this example. As the total width is 100%, it doesn't matter which way you do it.
Three column displays are not much different, and use the same principle.
Click here to see a 3 column display
The above example would span the whole width of the screen, and you may not want this. You need to introduce some padding or a margin, or even a border. This is usually the next stumbling block.
IE includes any margin, padding or border inside the width of a box, while the other browsers add margin, padding or border to the outside of the width of a box.
Example:
IE box: width 500px, margin 10px, border 1px, padding 5px = 500px wide
FF box: width 500px, margin 10px, border 1px, padding 5px = 500 + (10x2) + (1x2) + (5x2) = 532px wide
Confusing isn't it, but it's not too much of a problem to fix.
You need to isolate the margin, border or padding from the width of the box.
Solution:
If you want margins, borders or padding, you need 2 sets of <div>s to make it compatible with other browsers. Width and Float go in one <div> and any Margin, Border or Padding go in a separate inner <div>. Tags other than <div> can be used, which I'll explain later.
There are various 'hacks' that make different browser use different style rules, but it's not a good idea to use these. The reason being that if a browser version alters in the future, what effect will these 'hacks' then have?
<style type="text/css">
body {margin: 0; padding: 0;}
.layout {width: 100%;}
.linkpanel {float: left; width: 22%; background: #fcc;}
.linkbox {
margin: 10px;
border: 1px solid black;
padding: 0 10px 15px 10px;
background: white;
text-align: center;
}
.mainpanel {float: right; width: 78%; background: #69c;}
.mainbox {
margin: 10px;
border: 1px solid black;
padding: 0 15px 15px 15px;
background: white;
}
p {margin: 0; padding: 8px 0 0 0;}
h1, h2, h3 {margin: 0; padding: 15px 0 0 0;}
</style>
<div class="layout">
<div class="mainpanel">
<div class="mainbox">
<h2>Main Content Title</h2>
<p>Main Content Here</p>
</div>
</div>
<div class="linkpanel">
<div class="linkbox">
<h2>Links Title</h2>
<p>Your Links Here</p>
</div>
</div>
</div>
Click here to see what it looks like
Explanation:
In the above example, I've used all <div>s, but other tags can be utilized as I'll show later. The reason there are so many <div>s is to make it compatible with different browsers, which I'll now try to explain.
The outer <div class="layout"> holds everything together and states the total width. You may find it works without this, but as you get more adventurous, it will be needed later. A <div> tag is only a few bytes, so they won't make any difference to loading times.
The <div class="mainpanel"> holds the float + width, and the inner <div class="mainbox"> holds margin, border + padding, so the width remains the same and makes it compatible with the other browsers. This is the secret to compatibility as books I've read blatantly omit this important point.
Besides loading faster than Tables, there is another advantage. You'll notice the R/H Main Content comes before the L/H Links, yet the Links display first. This makes it easier for search engines to index your content better, as your content is the first thing it reads. You can do this with a 3 column display, but requires a different technique.
Click here to see it without the margin colours
Here's a 3 column display, with header and footer.
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 80%;
font-family: sans-serif;
background: #eee;
}
.titlepanel {
width: 100%;
margin: 8px 8px 0 8px;
border: 1px solid black;
padding: 0 8px 8px 8px;
text-align: center;
background: white;
font-family: cursive;
}
.layout {width: 100%;}
.linkpanel {float: left; width: 18%;}
.linkbox {
margin: 8px 0 8px 8px;
border: 1px solid black;
padding: 0 8px 8px 8px;
background: #fcc;
}
.mainpanel {float: left; width: 57%;}
.mainbox {
margin: 8px;
border: 1px solid black;
padding: 0 8px 8px 8px;
background: #69c;;
}
.adspanel {float: left; width: 25%;}
.adsbox {
margin: 8px 8px 8px 0;
border: 1px solid black;
padding: 0 8px 8px 8px;
background: #9c9;
}
.footer {
clear: both;
width: 100%;
margin: 0 8px 0 8px;
border: 1px solid black;
padding: 8px;
background: #abc;
}
p {margin: 0; padding: 8px 0 0 0;}
h1, h2, h3 {margin: 0; padding: 8px 0 0 0;}
</style>
<div class="titlepanel"><h1>Fancy Title</h1></div>
<div class="layout">
<div class="linkpanel">
<div class="linkbox">
<h2>Links</h2>
<p>Your Links Here</p>
</div>
</div>
<div class="mainpanel">
<div class="mainbox">
<h2>Title</h2>
<p>Main Content Here</p>
</div>
</div>
<div class="adspanel">
<div class="adsbox">
<h2>Adverts</h2>
<p>Your Adverts Here</p>
</div>
</div>
</div>
<div class="footer">Your Copyright Notice</div>
Click here to see what it looks like
I've show all the boxes to have margins, borders and padding, but it reality, you probably won't want to use them all on every box. This is just show how they can be used.
By removing the margins and some of the borders, you get a more general look like this:
Click here to see a slightly different look
A Tableless Example using other tags
This is the html that produces the contrived example at the top of the page. It's just a Definition List and no <div>s, so how's it done?
<dl class="table_example"> <dt><i>Is this a Table?</i></dt> <dd><i>No, it's not a Table</i></dd> <dt><i>How is it done?</i></dt> <dd><i>It's done with a DL and a style sheet</i></dd> <dt><i>Are there any Tables used in this page?</i></dt> <dd><i>No, none at all (view the Source to check)</i></dd> <dt><i>Is it hard to accomplish?</i></dt> <dd><i>A bit harder, but easy once you get into it</i></dd> </dl>
Definition Lists have been around since the beginning of time *joke* (IE 2 & Netscape 2), but don't get used much. The advantage they have is that they have an outer tag, and 2 inner tags. Does that ring any bells? Also notice that there is only 1 class needed. Here are the style rules, taken directly from my style sheet:-
dl.table_example {
margin: 0;
padding: 0;
border-top: 5px solid #ccc;
border-left: 5px solid #ccc;
background: white;
}
dl.table_example dt {
float: left;
width: 50%;
margin: 0;
padding: 2px 0;
border-right: 5px solid #ccc;
border-bottom: 5px solid #ccc;
}
dl.table_example dd {
margin: 0;
padding: 2px 0;
border-right: 5px solid #ccc;
border-bottom: 5px solid #ccc;
}
dl.table_example i {padding: 0 4px; font-weight: bold;}
Explanation:
A DL and DT normally don't have any margin or padding (DD's do have), but for any strange browsers, I've set them to zero just in case. The DL holds everything together. The DT floats left, so all the DD's will follow, but as they don't float, it assumes a new line. I'm using <i> tags as padding, as FF interprets the float differently and padding gets ignored if you included it in the DD.
Click here to see a block of 8 links
It's worth noting that browsers not supporting style sheets (screen readers etc.) will see this as a standard Definition List and read it correctly. This may also be true for hand-held devices which are getting very popular.
I hope I've given you enough to start experimenting with Tableless web page designs. There is a great deal more to learn and it'll feel strange to start with, especially if you're a regular user of tables. But, if you don't start now, you may get left behind as website designs moves on to new levels.
I'll continue on the next page about centering boxes and stuff, as {text-align: center;} doesn't work as you might think, especially with non IE browsers.
