CSS <div>Position incorrect

Hi,

I am currently learning CSS, and I have made a website. For some reason my #footer div tag is sitting in the wrong place. Its obvuiously something I have but but i cant work it out. Could someone helop me please? here is the CSS;

@charset "utf-8";
/* CSS Document */
body {
    background-color:#000;
    margin:0;
    height:auto;
    
}
#header {
    width:830px;
    height:177px;
    background:url(../images/White-Light_03.jpg);
    background-repeat:no-repeat;
    margin:5px 5px 3px 5px;
    
}
#pageHeader {
    background:url(../images/White-Light_08.gif);
    width:830px;
    height:33px;
    margin-left:5px;
    margin-top:3px;
}
    
#footer {
    background:url(../images/White-Light_09.jpg);
    background-repeat:no-repeat;
    width:830px;
    height:36px;
    margin: 0px 0px 0px 5px;
    bottom:0;
    float:none;
    }


#main {
    position:absolute;
    margin:0px 5px 0px 5px;
    width: 830px;
    height: 493px;
    background:url(../images/White-Light-Main.jpg);
    background-repeat:no-repeat;
    
    
}
#navigation {
    background:url(../images/White-Light_06.gif);
    background-repeat:no-repeat;
    width:830px;
    height:32px;
    margin-left:5px;
}
p {
    font-family:"Century Gothic";
    font-size:12pt;
    color:#FFF;
    padding-left:5px;
    margin:0px;
}
h1 {
    font-family:"Century Gothic";
    font-size:14pt;
    color:#666;
    font-style:normal;
    font-weight: 400;
    padding-top:0px;
    padding-left: 10px;
}
#textinput {
    width:200px;
    height:20px;
    background-color:#666;
    border: 1px solid #666;
    color:#FFF;
    font-family:"Century Gothic";
    font-size:10pt;
    }

Open in new window


And the HTML:
<div id="header"></div>
    <div id="navigation"></div>
    <div id="main">content</div>
    <div id="footer"></div>

Open in new window


for some reason, the footer div is sitting behinf the main div?

Any help would be appriciated

Thanks
DanielBlackmoreAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kpmartinCommented:
Change  #main height, it's too small

#main {
      background-repeat: no-repeat;
      position: absolute;
      margin: 0px 5px 0px 5px;
      width: 830px;
      height:auto;
      background: #008080;
}
CCSOFlagCommented:
it's because you have your main position as absolute.  Since you are not specifying any sort of left/top positioning, the absolute is unnecessary.  Just remove it and the footer will be at the bottom as expected.  If you do want to keep the main as absolute you'll need to make the footer absolute as well and give it left and top properties to position it below the main section.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kpmartinCommented:
OOps, needs some more tweaking brb
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

kpmartinCommented:
CCSOFlag is correct I forgot that I had done that in testing...
CCSOFlagCommented:
just to clarify what using absolute does:

Once you make the position of an element absolute, it is now taken out of the element order.  so the element after it is now the next element.  absolute is used when you want to put an element in a specific place.  This is more an advance method that is used in typically (but not limited to) one of these two ways:
1.  You have your entire page laid out pixel by pixel and know exactly where you want every element in questions.  I actually do this quite often because it makes rendering and lining up stuff a lot more reliable.
2.  You have a normal layout of some elements but you have one or more other elements that are brought forward using ZIndex but are put in certain places on your page.  For example maybe a logo on the upper left of the page.
CCSOFlagCommented:
just curious but why did you accept the height answer as a solution.  The height has nothing to do with the div being in the wrong place.  Keep in mind people will be looking at this in the future and they'll think that is the fix, when the fix is changing your positioning...
DanielBlackmoreAuthor Commented:
Sorry I didnt realise I had done. I was trying to mark both of yours right and clearly selected the wrong one.
CCSOFlagCommented:
You can click the request attention button on the original post and ask them to change this for you.
kpmartinCommented:
I agree and will gladly forfeit the points to CSSOFlag and approve removing my post if you contact a mod.  

DanielBlackmoreAuthor Commented:
Thanks to you both for the answers.

I have requested the answer to be CCSOFlag's.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.