View Full Version : css help

02-07-2005, 02:53 AM

I'm having some trouble with some css, it's not working how I wanted it to (story of my life). I have wacked up a sample css page to show where I'm going wrong. (sorry about the awful colours)


The problem that I'm having is I'm trying to get the footer to display underneath everything, at the moment it just displays underneath the content, which is fine until there isn't much content. I'm trying to keep the content as far up the page as possible, hopefully above the header and side menus (for seo purposes).

Thanks in advance

02-07-2005, 04:25 AM
Hello, welcome to the forums.

First of all, please direct your attention to the bold text decorated with a yellow warning sign. It says "Before you post, read our Rules & Posting Guidelines." Now, please take the time to read said request (http://www.codingforums.com/postguide.htm). Please help us keep this forum organized by using a more appropriate title for your thread.

Now, about your problem... You are using absolute positioning to position the columns, which is fine, but it takes the element "out of flow"; in other words, other elements ignore them. So the footer doesn't even see the columns, it just goes where it would have gone if they weren't there, which is halfway up the page.

To do what you need, you should combine a little relative positioning, or perhaps float things where you need them. It's a little detailed to explain here, but here is a good tutorial:


If you need additional help after that, just post back and we'll be glad to help you out.

02-08-2005, 02:34 AM
Thanks for your reply and my bad about the topic title, I should have known better

I have read that tutorial before and read it again as you suggested, but am still no closer to my goal. I am a complete css newbie, so please bear with me.

Should I be trying to float the footer as well as the left/right menus?

02-08-2005, 03:05 AM

Well, sorry to be so short, but there are a zillion ways to do what you are trying to do. A 3-column-type layout has so many ins and outs that unless you have something specific I'll be here typing all day :D

Not to worry, though, here's a link to a collection of three column layouts. Browse through them, pick one you like, and go from there...


When you get stuck on something in particular I'd be glad to help you out. Since you are already using position: absolute, I'd take a look at some layouts that do the same. The gist is you will wrap your "table" in a wrapper, assign that position: relative, and assign the other divs positions within that wrapper div.

Hope this helps,


I found this link on that page... it should be pretty close to what you are trying to do...


Hope it works!

02-08-2005, 03:10 AM
Cool, thanks for the collection of templates, I'll have a pick through them and see if anything works for me

Thanks for your help :)

02-08-2005, 04:38 AM
Ok, I had a play around with some of the templates on that site and this one seems to be the closest to my needs. Only problem is the left and right menus need to be set widths and the middle will be expandable (for different resolutions). I can't for the life of me make it work like that using this template.

Can anyone help me with that?

02-08-2005, 05:19 AM
Which template? If it's the one I recommended (http://www.pmob.co.uk/temp/3colfixedtest_3.htm) the middle column expands with the browser window and the left and right columns are a fixed width. The footer rests at the bottom of the page.

Post a link to your (new) code and I'll see if I can help you out.

02-08-2005, 05:26 AM
The one you recommended works fine, although we're trying to get the content as far up the page as possible, preferably before the left/right columns

the page i'm working on now is http://www.noodles.net.nz/test3.htm