CSS footer problem

I see other threads with similar problems and have tried the solutions offered but not getting any luck. I have tried absolute position, floating & relative and all come out the same.


my css code is

#mainContainer {
	width:760px; 
	padding:2px;} 

#footer {	 
	height:200px;
	text-align:left; 
	position:absolute; 
	bottom:0px; }

Code (css):

HTML

<div id="mainContainer">

blah blah

<div id="footer"><hr>
</div>
</div>

HTML:

I've used to green line to demonstrate the problem I get repeatedly - in firefox, the footer doesn't show up at all but in IE it's about 1/3 of the way down the page.

I guess I am missing something very obvious and I can't see for looking. I've been through my CSS book and various tutorials, and can't get it. Greatly appreciate any help!

http://www.themetalpeddler.com/css/title2.htm

 

Your footer needs a clear: both; added to the css and it needs to be ourside the maincontainer.

What you want is a div called container. Then a div called maincontentr that has all your content. Below this dive will be one called footer. Set it to clear both in the css.Then close your div called container
<div id-container>
<div id-maincontent></div>
<div id-footer></div>
</div>

 

Thanks, I added that but I think I must have a bad code in somewhere because even if I set the footer to be at absolute & 0 from the bottom, it's halfway up the page.
I'll look at it all again tomorrow, I've been playing with this footer for about 6 hours & it's driving me nuts

 

Your footer probably doesn't display because you haven't set a width for it and because there's no text content in it. Set a width and it should be displayed.

Firstly I'd suggest that you don't put the footer within the content div, as it just complicates matters. Then if you use relative positioning for the header and content divs, using relative positioning for the footer should place it after the content div.

Your code is impossible to read because there are so few line breaks in it. Break it up properly and people will find it easier to give you suggestions - most people will see that and just give up trying to make sense of it.

Making the code standards compliant wouldn't hurt either.

 

Hear-hear! How do you expect people to help debug your code if you have no spaces or line breaks. Your code is nearly impossible to read.

What are you editing with that outputs code like this?

All the best,

Jay

 

I have reviewed the code on your page in my editor. What a mess! You are using

br

Code (markup):

tags for paragraphs and have your divs all over the place. There is no logical layout from top to bottom on this page. You really need to learn to write your code logically and using appropriate tags.

Tell me why you need to have your top menu almost at the bottom of your code? Then why are you positioning it at the top. Why not start from the top down and from left to right when designing your page.

A good tip is to not use CSS until you have laid out the page in HTML first so that if a person had CSS off they could still make sense of your page.

BTW. If you want to know where your footer is, it is beneath image of the pots on the top left.

As stated above, you must have content in a div and apply a width to it.

If you really want to see what is happening, in you stylesheet at the very bottom put div{border:1px solid lime;} you will see where all your divs are.

Oh, and if I can't say it enough -- don't use

<br>

Code (markup):

for

<p>

Code (markup):

. It is just bad coding.

All the best,

Jay

 

Hi,

sorry I just saw more replies to this, have been busy with other work.

Oh I am very aware the code isn't very good. This was my first attempt at CSS so I was playing first to learn what was what then planned to go back and neaten it all up.

dj1471, As for the layout of the code, actually on my computer it is totally viewable on the page. I have no idea why, but when I upload, it all displays like that on just a couple of lines. I wasn't expecting anyone to go in and examine all the code so first, thanks for doing so and second, sorry it was so difficult.

I've been playing with changing position from relative to absolute etc. The footer DID have text and still displayed at the top - I just took it out and left in the hr tag to save on mess while I figured it out. Now, I've made it all absolute but positioned from the top instead of the bottom and it's fine. I figured since my menu is a fixed length the footer doesn't needed to ever be higher than it is.

Jay, I had a problem with the P tag. This, again, is probably due to the way I have set up my center column with the border. Everytime I did a p tag, the new paragraph started with a new border instead of being within the same one, so until I worked out why, I switched to br instead.

Thanks for all the input, I appreciate it

 

Thanks. helped me too.