Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Footers in CSS, How? 1

Status
Not open for further replies.

Kirderf

Technical User
Oct 4, 2000
183
US
I am trying to create a footer which will have the address and phone number on every page of the website. Of course, each page length changes and I need a footer to flow with the pages. So that eliminates absolute positioning. I also want to use an include statement to place the footer in the page.

Where can I find the CSS code to do this? Or can it even be done?
Any help here would be amazing!



I'd gladly pay you on Thursday
for a hamburger today!
 
Of course this can be done. Basically, you will need to position footer relatively to the element that is expanding between pages. But it is hard to give you any definite answers before seeing your code.

As for includes, you would put the <div id="footer"></div> into your include file and in the css you would define the behaviour.
 
Thanks Vragabond,
I would like to do this, but I have no idea how to make the footer position itself according to the expanding textbox.
Could you look at my code and see how close I am to success?
Here is my link.
I will insert the include file once it is all working. I will also create a separate .css sheet, but for now it is inside the page.


I'd gladly pay you on Thursday
for a hamburger today!
 
I've played with a site a little and made an alternate version here:


Note that it is not wise to use inline styles and classes/ids, since it can get confusing. Anyhow, the code here is changed and the footer is always displayed below the main text. However, it will be displayed over the left menu if the main text is not long enough. I would have to work a little more on it to get rid of that.

A word about positioning. When using absolute positioning, you take the element out of the normal document flow. That means that other elements ignore the absolutely positioned ones just as absolutely positioned one ignores the others. Since the left column is positioned absolutely, it ignores the flow and does not push the footer down. Main div is positioned relatively and does that.
 
Wow, thats great! So many people are having trouble with this. I notice you changed a few lines and I am trying to figure out the logic behind it. I think I get it. If you position items relatively, then they will not overlap eachother, just push the next ietm down. Correct?
As for the styles/classes/id's a lot of that is happening in Dreamweaver MX. I will pay more attention to this and maybe clear up some unnecessary confusion. thanks again VB

I'd gladly pay you on Thursday
for a hamburger today!
 
Here is a discussion about the "footer" problem.

As far a the left navigation goes, I will just try to make sure the main page has returns if the data is slim.
There might be abetter way around that, but for now at least this works!

I'd gladly pay you on Thursday
for a hamburger today!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top