Heres a good article
Yeah, getting the 5/box-3/col set with fixed heights is trivially easy. Try getting 'equal columns' if you don't fix the height, however. That's the challenge. It's been so for many years, and is well known. How to get a table /grid without any table tags, using only css?
What happens is that the columns only go down as far as the content pushes them, much like the old NN not responding to cell/column widths if there wasn't enough text in the cell. One can provide a common background and give the impression of full length and equal columns. But try to color one column, try to color the shortest column, and one instantly sees the problem with css, used that way.
But it's an old way with the arrival of FF 2 and Opera 9. Sure IE6 is out of luck, here. But IE6, good for its day, is subject to TOO MANY hack-arounds as it is.
In FF and Opera, you simply use the CSS2 table stylings. Now, admittedly, these are presently designed to work with HTML table tags. But that said - two will work just with any element. These are display: table-row and display: table-cell. You can even make up your own element name, or just use class.
First, the way one might have done it, before, and that works in IE6. It's limited. Even FF didn't seem to like the percentage column widths. So fixed widths are used for the columns. One floats left. The middle has left and right margins to keep it out of right and left columns. And the right column is positioned absolutely to the right border. Since the columns don't expand vertically, a common background is used for all three columns. Here the footer attaches to the middle column. It could be assumed that the middle will always be the tallest. But should either the left or right have more content and become taller, then the footer will still cling to the bottom of the middle column, and will overlap the longest column in an ugly way. It's a lot of compromises, assumptions. But in this way, it works.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
<html>
-
<head>
-
<title>CSS 'equal columns'</title>
-
<style>
-
-
.containdiv {
-
width: 100%;
-
display: block;
-
border: 1px solid #000;
-
background: #afa;
-
}
-
-
.col {
-
padding: 1em;
-
}
-
-
.col1 {
-
float: left;
-
width: 200px;
-
}
-
-
.col2 {
-
display: block;
-
top: 0;
-
margin-left: 220px;
-
margin-right: 230px;
-
}
-
-
.col3 {
-
width: 200px;
-
position: absolute;
-
right: 0;
-
top: 0;
-
}
-
-
.ftr SPAN, .hdr SPAN {
-
display: block;
-
padding: 0.5em;
-
}
-
-
.hdr {
-
border-left: 1px solid #000;
-
border-top: 1px solid #000;
-
background: #ffa;
-
}
-
-
.ftr {
-
border-left: 1px solid #000;
-
border-bottom: 1px solid #000;
-
border-top: none;
-
clear: left;
-
background: #ffa;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="containdiv">
-
-
<div class="hdr">
-
<span style="text-align:center;">Header</span>
-
</div>
-
-
<div style="position:relative;width:100%;">
-
<span class="col col1">some text</span>
-
-
<span class="col col2"> In the second Oration, delivered next day, he dwells on the Sacrament of Baptism and its spiritual effects; and takes occasion to reprove the then still prevalent practice of deferring Baptism till the near approach of death. He likewise dwells on the truth that the validity and spiritual effect of the Sacrament is wholly independent of the rank or worthiness of the Priest who may minister it
-
</span>
-
-
<span class="col col3">some text</span>
-
</div>
-
-
<div class="ftr">
-
<span style="text-align:center;clear:both;">Footer</span>
-
</div>
-
-
</div>
-
</body>
-
</html>
-
So that's for IE, FF and Opera. It should work in all three. However, if one wanted separate colors in each column, one would be out of luck in IE6. So here's the change, using table-cell from CSS2. All one does is substitute the following rules for the same rules above. Try it.
-
.containdiv {
-
width: 100%;
-
display: block;
-
border: 1px solid #000;
-
}
-
-
.col {
-
padding: 1em;
-
display: table-cell;
-
}
-
-
.col1 {
-
width: 10%;
-
background: #dde;
-
}
-
-
.col2 {
-
background: #ede;
-
}
-
-
.col3 {
-
width: 10%;
-
background: #edd;
-
}
-
Now, all of a sudden, it looks like a table. Full-floating. Percentage widths. Each cell full height. Each cell has its own color. And each cell is full top to bottom, touching header and footer. Again, won't work in IE6. But one would presume that this just above would be in the main external stylesheet. And those previously that worked in IE6 would be in whatever 'iefix' stylesheet that is separately loaded in. Everyone does that, these days. IE6 is the 'downscale' browser that requires some fix-up and touch-up. So one would just include the first col and container styles in the iefix stylesheet, and it would display with all the compromises, but the same HTML would display properly (after a fashion) in IE6.
254
