470,596 Members | 1,215 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,596 developers. It's quick & easy.

CSS - 3 columns - footer

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;
}
Jul 20 '05 #1
1 2811
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.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Alex | last post: by
1 post views Thread by Olav Tollefsen | last post: by
5 posts views Thread by Gary Blakely | last post: by
14 posts views Thread by varois83 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.