CSS - 3 columns - footer

[Will Buntin]

I am trying to design my site without tables, using CSS for
positioning and am having limited success. My main issue is I have a
three column layout and my footer needs to run across the page, after
the longest content from any column has finished. I've found a few
examples and I thought I had mine set up correctly, but obviously
something is wrong. So if there is any CSS expert out there willing to
give me some tips...

The page is http://www.ukhoopsfans.com/csstest2.php

The CSS is

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}

td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

h2 {
background-color:#CCCCCC;
color:#003399;
font-size: larger;
}

#header {
clear: both;
margin-left: 10px;
text-align: center;
color: #000;
border-bottom: 1px solid #333;

}

#leftcol {
position: absolute;
left; 0;
width: 150px;
margin-left: 10px;
margin-top: 0px;
color: #000;
padding: 3px;
}

#rightcol {
position: absolute;
left: 80%;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}

#content {
margin-right: 0px 25% 0 165px;
padding: 3px;
color: #000;
}
#footer {
clear: both;
width: 95%;
margin: 10px;
text-align: center;
padding: 3px;
bordoer-top: 1px solid #333;
color: #000;
}

[Neal]

On 10 Sep 2004 18:57:10 -0700, Will Buntin <ad******@gmail.com> wrote:

I am trying to design my site without tables, using CSS for
positioning and am having limited success. My main issue is I have a
three column layout and my footer needs to run across the page, after
the longest content from any column has finished. I've found a few
examples and I thought I had mine set up correctly, but obviously
something is wrong. So if there is any CSS expert out there willing to
give me some tips...

The page is http://www.ukhoopsfans.com/csstest2.php
I'll happily point out problems I see relating to your current issue and
otherwise.
The CSS is

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}
If you were to shrink the text at all from default, Verdana would be a
problem. As it is, I think this is acceptable, but be aware the
replacements for Verdana if it isn't available on the machine will seem
smaller.
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
You could set these together. I'd do all the above like this:

body, td, th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

body {
margin: 0;
padding: 0;
}
#header {
clear: both;
margin-left: 10px;
text-align: center;
color: #000;
border-bottom: 1px solid #333;

}
Why clear: both? clear is used to clear a floated element, and you haven't
used any. So this isn't needed.
#leftcol {
position: absolute;
left; 0;
width: 150px;
margin-left: 10px;
margin-top: 0px;
color: #000;
padding: 3px;
}
Absolute takes the element out of the flow and positions it relative to
the containing block, in this case body. So that's why the column is to
the top of the viewport.

As the height of #header is determined by the image, use that pixel value
as the top: offset.
#rightcol {
position: absolute;
left: 80%;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}
Same here.
#content {
margin-right: 0px 25% 0 165px;
padding: 3px;
color: #000;
}
No need for a value on 0 widths. 0px can just be 0.
#footer {
clear: both;
Again, clear what?
width: 95%;
margin: 10px;
text-align: center;
padding: 3px;
bordoer-top: 1px solid #333;
color: #000;
}

But the actual CSS reads:

#footer {

position: absolute;
bottom: 0;
width: 100%;
//clear: both;
//width: 95%;
//margin: 10px;
//text-align: center;
//padding: 3px;
//border-top: 1px solid #333;
//color: #000;
}

which is kinda a mess. You sure don't want position: absolute here.

Here's the thing: if the center section will always be taller than the
sides, you don't need to position at all, it'll land there in normal flow.
But, if it might not be, then you need to float the side columns instead
of positioning them. Then the clear: both in the footer will be below the
floats for sure.

Read up on floats. Takes a little getting used to but I think you'll want
to float the columns here.