Relative Positioning Problem of 3 main layout divs

Relative to its inherant position, which should be below the body div...given the natural flow of the divs, and how they are rendered, the default "relative" position should be right below the body div.

But why declare it's position as 'relative' if you aren't gonna move it? Just skip it out entirely.

Because I was going to do a relative top 1px to create a border at the top, instead of declaring the border directly...

I moved it outside of the "layoutMain" parent div...this is the heiarchy of divs..

layoutPage (the "background of the page" )
layoutMain (the actual body parent div)
layoutHeader (Header div)
layout Body (Body div)
layoutFooter (Footer div)


I have moved the footer so that layoutPage is the parent div of layoutFooter...now it is even a little more weird...

http://fivestates.planningphase.com/about.php

I reverted it back to inside the layoutBody div, and took off the "relative" attribute, now it seems like all it did was change the "zindex"...since now it is in the back...

Man that is weird. Your source is just hard to follow, not sure why. Try moving the footer down 1 more div.

Done, it is now in the layoutPage div, which is the div for the whole site, not the div for content...

If I move it down a div, and outside of the "layoutBody" div, it just places the div in the middle of the page, and makes it 100% of the screen...as you can see...


I just don't understand why it is just stretching it all the way heightwise when it is in the layoutBody div...

http://jigsaw.w3.org/css-validator/vali ... medium=all

Everything is validated, and compliant, but Firefox is still not liking it...any other suggestions?

http://fivestates.planningphase.com/about.php is the page

any suggestions

remember though, that validation doesn't mean that the page will display as it should, it just means all the tags are closed correctly etc.

btw, i've just viewed the site in firefox, and it looks like you've managed to bring the footer down....the only problem now, is that you need to change the background color of the main and left menu to white as it's showing in red.

The problem is, that is actually the footer stretching up to the header, not the background actually being red...I don't know what else to do

You should really clean up your code, you would have FAR fewer problems. Try making your .css a little easier to read. You'd be suprised how much easier things will be once your consolidate and simplify.

In what ways should the code be simplified, someone said that before, and I believe they concured that the divs were all for the most part necessary. Reason being is, it isn't a static page, and thus everything needs to move around each other if there is more content...thus you have "aggregate section divs" as well as the content divs themselves. If you have an example of how I can "clean up the code" than please give it.

As far as simplifying the css, that was already discussed as well.