Footer Is Being Overlapped By Other <divs>

[mboehler3]

My website here:http://www.healthnutsradio.com/backend/index.phpHas the footer hidden underneath the main body content. If you look at how it is supposed to look:http://www.healthnutsradio.com/backend/contact_us.phpYou will see the footer is visible at the bottom. Does any one know what I'm doing wrong on the index.php page? Thank you for your help

[mboehler3]

By the way, I tried to do a "clear: both;" command, but that did not work.

[Ingolme]

I couldn't find a closing tag for <div id="Rightbox">, therefore the footer is inside it and floated to the right.Why is your footer 1000px wide? It puts a horizontal scrollbar on my browser. Instead of giving it a width, just give a bit of margin on the left and right:

#Footer {margin: 0 1em; /* Margin top and bottom: 0, Margin left and right: 1em */[...]}

[mboehler3]

Hey, I looked at the Div tags and deleted what was unnecessary, but it didn't correct the problem. The footer is still being overlapped. And when I entered in the margin changes for the footer, it moved the content on the Rightside a few pixels to the left, pushing it outside of the header-area.Any ideas on what I can do to make my footer visible? I really have been looking into this for like a week and can't figure out what's wrong. On some pages it looks great.

[Tykain]

I don't see a div with the footer id in your html code.

[mboehler3]

I don't see a div with the footer id in your html code.

<div id="Footer"><?php include("footer.php"); ?></div>

Im using an include code

[Ingolme]

I'm sorry to say that your site is coded quite badly.You have a <link> element in the body of the document, that's calling a stylesheet that uses absolute positioning.

#Mainbox{ width: 669px; position: absolute; background-image: url('main-images/main_box_middle.jpg'); background-repeat: repeat-y;}

When using absolute or relative positioning, you get overlapping problems. I won't be able to give you a solution due to the complexity of your site's code.The code is overly complex for a simple layout like that one. You're using a mix of <table>, <div> and <p> elements to put things in their place. Remember to use <ul> and <li> elements, and not <p> elements for lists. The <font> tag, align attribute and border attribute are deprecated, use CSS for them. The page requires a <!DOCTYPE> element. Your <img> tags require an alt attribute. All style attributes would be better off in a CSS stylesheet.In fact, your page looks as if several different people with varying degrees of knowledge worked on it.

[Tykain]

<div id="Footer"><?php include("footer.php"); ?></div>

Im using an include code

In your CSS there is this :#Footer{ margin-top: 15px; width: 1000px; clear: both;}But in your footer.php document, there is no div with that id, nor in the page you linked.Maybe i'm missing something, but...And i agree with Ingolme. Imo, your whole layout need a complete revamp.

[mboehler3]

thank you all for your comments, truthfully, this is the first site that I've created using .php. Maybe I can re-type the layout and post it here so you can give me feedback? again your comments are appreciated, thanks

[mboehler3]

Ok, I've had some time to look at your comments and my scripts... I'd like to correct what's wrong, and hope that you guys will have some patience and willingness to work with me... I've been to many forums and had people comment, then when I ask them additional questions I get no response.From what you've written there's a lot to correct, so I'd like to start with one problem at a time.I've tried to clean up some of my index.php script, and would like you to take a look at the page and coding now.I've been told in the past not to use tables, but the only reason I used them here was to center everything. I don't know any other way to have everything centered. If you look at the page now, everything is left aligned. I can, however, see the footer, which was why I created this post. Ingolme, this might be a dumb question, but why is it necessary to have a !DOCTYPE ? No one has really explained that to me... also, can you suggest a !DOCTYPE that I should be using?Again, thank you for your help, I really appreciate it very much, I'm basically doing this project on my own and have no one to go to for coding assistance.

[Tykain]

Using a DTD tells browsers how they should interpret your code. This means your website will be rendered with better consistency, because browsers don’t have to guess which set of rules to apply. If you make them guess, then they will sometimes guess wrong.I would recommend using either HTML 4.01 Strict or XHTML 1.0 Strict. Imo, transitional should only be used for transitioning from content that did not have a DTD to begin with and now does to help give some order to the confusion.

[Ingolme]

The <!DOCTYPE> Is necessary to tell the browser what language your page is written in. Also, using a Strict DOCTYPE (both HTML and XHTML) will make your page look almost the same in all browsers.To begin with, I'd teach you the basics of making a layout with CSS.There are only three states the blocks will be: floated, normal and clearing.

• Floated blocks will go to the left or right of all the content that follows it.
• Normalblocks take the full width of the screen and will adjust their width if there are floated elements around or if they have margins.
• Clearing blocks are blocks that will not go next to floated elements, they'll go below instead.

In a basic three column layout we will have five blocks: Header, left column, right column, main column and the footer.The header will be a normal block, the left and right columns will be floated to the left and right, the main column is a normal block with margins on the left and right (in order to not take the space of the floated elements) and the footer will be a clearing block in order to go below the other columns.HTML:

<div id="header">Header</div><div id="left">Left column</div><div id="right">Right column</div><div id="main">Center column</div><div id="footer">Footer</div>

CSS:

#left { float: left; width: 120px; }#right { float: right; width: 140px; }#main { margin-left: 120px; margin-right: 140px; }#footer { clear: both; }

This will take the full width of the screen, if you want a fixed width and centered, you would put it all within a wrapper and give it "margin: 0 auto;" to make it center (Internet Explorer requires the parent element to have "text-align: center").

<div id="wrapper"><div id="header">Header</div><div id="left">Left column</div><div id="right">Right column</div><div id="main">Center column</div><div id="footer">Footer</div></div>

CSS:

html,body { margin: 0; padding: 0; text-align: center;#wrapper { width: 960px; margin: 0 auto; text-align: left; }#left { float: left; width: 120px; }#right { float: right; width: 140px; }#main { margin-left: 120px; margin-right: 140px; }#footer { clear: both; }